Введение в 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 подробно описывает эту тему и является отличным следующим шагом.