Поиск по сайту:

Введение в localStorage и sessionStorage


Введение

Объекты localStorage и sessionStorage, являющиеся частью API веб-хранилища, — два отличных инструмента для локального сохранения пар ключ/значение. Использование localStorage и sessionStorage для хранения является альтернативой использованию файлов cookie и имеет некоторые преимущества:

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

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

Предпосылки

Для выполнения этого урока вам потребуется следующее:

  • Последняя версия Node, установленная на вашем компьютере. Чтобы установить Node, выполните действия, описанные в этом руководстве по установке Node.js.
  • Основное понимание программирования на JavaScript, которое вы можете найти в этой серии статей Как программировать на JavaScript.

Шаг 1 — Понимание localStorage и sessionStorage

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

Обладая этими знаниями, вы теперь можете создавать, читать и обновлять пары ключ/значение в localStorage.

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

Вы можете создавать записи для объекта localStorage с помощью метода setItem(). Метод setItem() принимает два аргумента: key и соответствующее значение:

let key = 'Item 1';
localStorage.setItem(key, 'Value');

Чтобы прочитать записи, используйте метод getItem(). Метод getItem() принимает один аргумент, который должен быть ключом. Эта функция вернет соответствующее значение в виде строки:

let myItem = localStorage.getItem(key);

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

Обновление записи выполняется с помощью метода setItem(). Опять же, он принимает два аргумента. Ключевым аргументом будет существующий ключ, а аргументом значения будет новое значение:

localStorage.setItem(key, 'New Value');

Теперь значением localStorage для key является New Value вместо Value.

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

Шаг 3 — Удаление и очистка записей

Вы можете удалить запись с помощью метода removeItem(). Метод removeItem() принимает один аргумент, который будет являться ключом объекта localStorage:

localStorage.removeItem(key);

Вы также можете очистить все элементы в localStorage. Это можно сделать с помощью метода clear():

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

localStorage.clear();

Эти методы дают вам больше возможностей для быстрого удаления и очистки элементов из localStorage. Однако у localStorage есть некоторые ограничения. И localStorage, и sessionStorage могут хранить только строки. Чтобы обойти это, вам придется использовать методы JSON.

Шаг 4 — Сохранение нестроковых значений с помощью JSON

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

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

Хотя myObj является объектом, JSON.stringify(myObj) преобразует его в строку. Таким образом, myObj теперь является допустимым значением localStorage.

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

let item = JSON.parse(localStorage.getItem(key));

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

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

Шаг 5 — Проверка предметов

На этом шаге вы проверите наличие элементов в localStorage. Вы можете использовать инструкции if, чтобы проверить, содержит ли localStorage элементы или оно пусто. Для этого проверьте длину localStorage:

if (localStorage.length > 0) {
  // ...
}

Если localStorage.length больше 0, то в объекте localStorage есть элементы. Включите оператор else, если в localStorage нет элементов:

if (localStorage.length > 0) {
  // ...
} else {
  // ...
}

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

Шаг 6 — Повторение элементов

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

for (let i = 0; i < localStorage.length; i++){

}

Метод key() принимает в качестве аргумента целое число и возвращает соответствующий ключ. В цикле for передайте i как целое число для key():

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
}

Используйте метод getItem, чтобы вернуть соответствующее значение для key:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
}

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

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

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

Шаг 7 — Проверка поддержки

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

if (window.localStorage) {
  // localStorage supported
}

Вы также можете использовать веб-сайт Can I use…, чтобы проверить поддержку localStorage в основных браузерах.

Заключение

Вы можете использовать объекты localStorage или sessionStorage для хранения пар ключ/значение. Существуют методы, позволяющие взаимодействовать с элементами в localStorage. С помощью этого руководства вы создали, удалили и обновили записи в localStorage. Вы также преобразовали данные массива и объекта в строки и обратно, используя методы JSON.

Иногда лучше использовать файлы cookie вместо localStorage или session. Что такое файлы cookie и как с ними работать Использование JavaScript подробно описывает эту тему и является отличным следующим шагом.