Недавно я узнал об удобном маленьком инструменте под названием localStorage
, поэтому я решил, что немного почитаю о нем, чтобы получить более четкое представление, а затем попытаюсь выразить это понимание своими словами.
Но сначала давайте вернемся немного назад. Итак ... не моими собственными словами, а согласно веб-документации MDN:
При написании кода для Интернета доступно большое количество веб-API. API веб-хранилища предоставляет механизмы, с помощью которых браузеры могут хранить пары ключ / значение гораздо более интуитивно понятным образом, чем использование файлов cookie.
Краткий обзор веб-хранилища
Существует два разных механизма для веб-хранилища - sessionStorage
и localStorage
.
Во-первых, давайте посмотрим, что они оба предлагают:
Хранилище: возможность устанавливать, извлекать и удалять данные локально в браузере; сохраненные данные зависят от протокола страницы
Window: расширение Window
с новым свойством хранения и обработчик Window.onstorage
event, который запускается при изменении области хранения.
StorageEvent: astorage
event срабатывает, когда изменяется область хранения (например, для нового элемента задано хранилище).
Строки: поддерживаются только строки "ключ-значение"; другие типы данных автоматически конвертируются
Размер: большинство современных браузеров допускают минимум 2 мегабайта данных.
Теперь давайте разберемся в различиях:
sessionStorage:
данные сохраняются до закрытия окна браузера
localStorage:
данные сохраняются до тех пор, пока они не будут очищены вручную, даже после закрытия окна браузера + данные распределяются между всеми вкладками и окнами с одним и тем же источником
Методы веб-хранилища
setItem (key, value)
- сохранить пару ключ-значениеgetItem (key)
- получить сохраненное значение по ключуremoveItem(key)
- удалить пару ключ / значение по ключуclear()
- удалить все сохраненные данныеkey(index)
- получить ключ на заданной позицииlength
- возвращает количество сохраненных элементов
Примеры
Проверьте, поддерживается ли localStorage
в браузере и хранится ли что-нибудь в данный момент:
Добавить данные вlocalStorage
:
Получить данные отlocalStorage
:
Обновить данные inlocalStorage
:
Удалить данные inlocalStorage
:
Очистить все данные inlocalStorage
:
Добавление объектов JSON вlocalStorage
:
Поскольку localStorage
only supportsstrings
, мы используем JSON.stringify()
для преобразования нашего объекта в строку
Однако повторное получение этого предмета приведет к:
"{"toppings":"Pineapple and Ham","scandalous":"very"}"
Получить объекты JSON отlocalStorage
:
Мы используем JSON.parse()
для преобразования содержимого обратно в наш тип данных.
Случаи применения
Интернет-хранилище обычно используется для сохранения данных, таких как настройки пользователя, запоминания элементов, сохраненных в корзине для покупок, и отслеживания того, что пользователь вошел в систему.
Хотя файлы cookie могут использоваться для аналогичных типов хранилищ, они имеют значительно более низкие пределы хранения и отправляют данные на сервер с каждым HTTP-запросом.
Ознакомьтесь с документацией MDN здесь для получения дополнительной информации, которая поможет вам решить, какой механизм веб-хранилища может быть лучше всего для вашего приложения.