Как использовать localStorage и sessionStorage в JavaScript

Введение

LocalStorage и sessionStorage, часть API веб-хранилища, – это два отличных инструмента для локального хранения пар ключ/значение.

Использование localStorage и sessionStorage для хранения данных является альтернативой использованию cookies и имеет ряд преимуществ:

• Данные сохраняются только локально и не могут быть прочитаны сервером, что устраняет проблему безопасности cookies.
• Благодаря этому вы сможете сохранить гораздо больше данных (10 МБ для большинства браузеров).
• Простой синтаксис.

Он также совместим со всеми современными браузерами, поэтому вы можете использовать его уже сегодня без каких-либо проблем.

Cookies по-прежнему полезны, особенно когда речь идет об аутентификации, но бывают случаи, когда localStorage или sessionStorage могут быть лучшей альтернативой.

Предпосылки

Чтобы успешно освоить этот материал, вам понадобится следующее:

• Последняя версия Node.
• Базовые знания JavaScript.

Понимание localStorage и sessionStorage

localStorage и sessionStorage практически идентичны и имеют одинаковый API.

Разница в том, что при использовании sessionStorage данные сохраняются только до закрытия окна или вкладки.

При использовании localStorage данные сохраняются до тех пор, пока пользователь вручную не очистит кэш браузера или пока веб-приложение не очистит данные.

В этом руководстве рассматривается localStorage, но синтаксис sessionStorage такой же.

Создание, чтение и обновление записей

Вы можете создавать записи для localStorage с помощью метода setItem().

Метод setItem() принимает два аргумента, ключ и соответствующее значение:

let key = 'Item 1';
 localStorage.setItem(key, 'Value');
Code language: JavaScript (javascript)

Чтобы прочитать записи, используйте метод getItem()

Метод getItem() принимает аргумент, который должен быть ключом.

Эта функция вернет соответствующее значение в виде строки:

let myItem = localStorage.getItem(key);
Code language: JavaScript (javascript)

Этот код присваивает myItem значение ‘Value’, которое является соответствующим параметром для ключа.

Обновление элемента выполняется с помощью метода setItem().

Опять же, необходимы два аргумента. Аргумент key будет существующим ключом, а аргумент value – новым значением:

localStorage.setItem(key, 'New Value');
Code language: JavaScript (javascript)

Теперь значением ключа localStorage будет ‘New Value’ вместо ‘Value’.

Вы можете создавать, читать и обновлять записи в объекте localStorage

Вы также можете удалять отдельные записи и удалять все записи в формате localStorage

Удаление записей

Вы можете удалить элемент с помощью метода removeItem()

Метод removeItem() принимает аргумент, который будет ключом объекта localStorage

localStorage.removeItem(key);
Code language: CSS (css)

Вы также можете очистить все элементы в localStorage.

Это можно сделать с помощью метода clear().

Вот как очистить все, что хранится в localStorage:

localStorage.clear();
Code language: CSS (css)

Эти методы дают вам возможность быстро удалять и извлекать элементы из localStorage.

Однако у localStorage есть некоторые ограничения.

И localStorage, и sessionStorage могут хранить только строки.

Чтобы обойти эту проблему, вам нужно использовать методы JSON.

Хранение нестроковых значений с помощью JSON

localStorage может хранить только строковые значения.

Если вы хотите хранить объекты или массивы в качестве значений в localStorage, вы можете использовать JSON.stringify() для преобразования их в строки.

При создании или обновлении пар ключ/значение в localStorage используйте JSON.stringify() с объектом или массивом в качестве аргумента:

let myObj = { name: 'Skip', breed: 'Labrador' };
 localStorage.setItem(key, JSON.stringify(myObj));
Code language: JavaScript (javascript)

Хотя myObj является объектом, JSON.stringify(myObj) преобразуется в строку.

Таким образом, myObj теперь является значением localStorage.

Для чтения и возврата строковых значений используйте метод JSON.parse(). JSON.parse() принимает строки JSON и преобразует их в объекты JavaScript. JSON.parse() принимает в качестве аргумента .getItem():

let item = JSON.parse(localStorage.getItem(key));
Code language: JavaScript (javascript)

Теперь элемент устанавливается равным значению ключа.

В приведенном выше фрагменте кода значение ключа было установлено в строковую версию myObj. Использование JSON.parse превращает myObj обратно в объект. Поэтому элемент устанавливается равным myObj как объект, а не как строка.

Возможность преобразовывать массивы и объекты в строки с помощью JSON.stringify и обратно с помощью JSON.parse очень полезна.

Вам также потребуется знать, как проверить, пуст ли localStorage или нет.

Проверяем пуст или нет

В этом шаге вы проверите наличие элементов в localStorage.

Вы можете использовать if, чтобы узнать, содержит ли localStorage элементы или он пуст.

Для этого используем длину localStorage:

if (localStorage.length > 0) {
 //...
 }
Code language: JavaScript (javascript)

Если localStorage.length больше 0, то внутри объекта localStorage есть элементы

Добавим else для ситуации отсутствия элементов в localStorage:

if (localStorage.length > 0) {
 //...
 } else {
 //...
 }
Code language: JavaScript (javascript)

Вы можете включить код для применения в else if и else.

Цикл.

localStorage и sessionStorage не поддерживают метод forEach localStorage через элементы в localStorage, поэтому используйте цикл for.

for (let i = 0; i < localStorage.length; i++){
 }
Code language: JavaScript (javascript)

Функция key() принимает целое число в качестве аргумента и возвращает соответствующий ключ.

С помощью for передайте i как целое число для key():

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i);
 }
Code language: JavaScript (javascript)

Для возврата соответствующего значения ключа используйте getItem:

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i);
 let value = localStorage.getItem(key);
 }
Code language: JavaScript (javascript)

Создайте console.log для вывода ключа и значения на экран:

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i);
 let value = localStorage.getItem(key);
 console.log(key, value);
 }
Code language: JavaScript (javascript)

key() очень полезна для итерации по localStorage с помощью циклов for.

Проверка совместимости.

Вы можете протестировать поддержку localStorage, проверив наличие окна в объекте с помощью оператора if.

if (window.localStorage) {
 //localStorage supported
 }
Code language: JavaScript (javascript)

Заключение

Для хранения пар ключ/значение можно использовать localStorage или sessionStorage.

Существуют методы, позволяющие взаимодействовать с элементами внутри localStorage.

В этом руководстве вы создали, удалили и обновили записи в localStorage. Вы также преобразовывали данные из объектов и массивов в строки и наоборот, используя методы JSON.