Введение
localStorage sessionStorage, часть API веб-хранилища, — это два отличных инструмента для локального сохранения пар ключ/значение. Использование localStorage и sessionStorage для хранения является альтернативой использованию файлов cookie и имеет некоторые преимущества:
- Данные сохраняются только локально и не могут быть прочитаны сервером, что устраняет проблему безопасности файлов cookie.
- Это позволяет вам сохранять гораздо больше данных (10 МБ для большинства браузеров).
- Синтаксис прост.
Он также поддерживается во всех современных браузерах, поэтому вы можете без проблем использовать его сегодня. Файлы cookie по-прежнему полезны, особенно когда речь идет об аутентификации, но бывают случаи, когда localStorage или sessionStorage могут быть лучшей альтернативой.
Предпосылки
Для выполнения этого урока вам потребуется следующее:
- Последняя версия Node, установленная на вашем компьютере. Чтобы установить Node, прочтите руководства на этой странице.
- Базовое понимание программирования на JavaScript.
Понимание localStorage и sessionStorage
localStorage и sessionStorage почти идентичны и имеют одинаковый API. Разница в том, что с sessionStorage данные хранятся только до закрытия окна или вкладки. С localStorage данные сохраняются до тех пор, пока пользователь не очистит кеш браузера вручную или пока веб-приложение не очистит данные. В этом руководстве представлено localStorage, но синтаксис для sessionStorage такой же.
Обладая этими знаниями, вы теперь можете создавать, читать и обновлять пары ключ/значение в localStorage.
Создание, чтение и обновление записей
Вы можете создавать записи для объекта 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.
Удалить и удалить и записи
Вы можете удалить элемент с помощью removeItem(). Метод removeItem() принимает аргумент, который будет являться ключом объекта localStorage:
localStorage.removeItem(key);Вы также можете удалить все элементы в localStorage. Это можно сделать с помощью метода clear():
Вот как очистить все, что хранится в localStorage:
localStorage.clear();Эти методы дают вам возможность быстро удалять элементы из 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));Хотя 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 пустым или нет.
Проверьте статьи
На этом шаге вы проверите наличие элементов в localStorage. Вы можете использовать объявления if чтобы проверить, содержит ли localStorage элементы или оно пусто. Для этого проверьте длину localStorage:
if (localStorage.length > 0) {
//...
}Если localStorage.length больше 0, то внутри объекта localStorage есть элементы. Включите оператор else, если в localStorage нет элементов:
if (localStorage.length > 0) {
//...
} else {
//...
}Вы можете включить код для применения в операторах if и else. Вы можете перебрать элементы в localStorage.
Повторение элементов
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.
Проверьте СМИ
Вы можете протестировать поддержку localStorage, проверив, доступно ли window для объекта с помощью оператора if:
if (window.localStorage) {
//localStorage supported
}Вы также можете использовать веб-сайт Can I use…, чтобы проверить поддержку localStorage для основных браузеров.
Вывод
Вы можете использовать localStorage или sessionStorage для хранения пар ключ/значение. Существуют методы, позволяющие взаимодействовать с элементами в localStorage. С помощью этого руководства вы создали, удалили и обновили записи в localStorage. Вы также преобразовывали данные массива и объекта в строки и наоборот, используя методы JSON.
