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

Но сначала давайте вернемся немного назад. Итак ... не моими собственными словами, а согласно веб-документации MDN:

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

Краткий обзор веб-хранилища

Существует два разных механизма для веб-хранилища - sessionStorage и localStorage.

Во-первых, давайте посмотрим, что они оба предлагают:

Хранилище: возможность устанавливать, извлекать и удалять данные локально в браузере; сохраненные данные зависят от протокола страницы

Window: расширение Window с новым свойством хранения и обработчик Window.onstorageevent, который запускается при изменении области хранения.

StorageEvent: astorageevent срабатывает, когда изменяется область хранения (например, для нового элемента задано хранилище).

Строки: поддерживаются только строки "ключ-значение"; другие типы данных автоматически конвертируются

Размер: большинство современных браузеров допускают минимум 2 мегабайта данных.

Теперь давайте разберемся в различиях:

sessionStorage: данные сохраняются до закрытия окна браузера

localStorage: данные сохраняются до тех пор, пока они не будут очищены вручную, даже после закрытия окна браузера + данные распределяются между всеми вкладками и окнами с одним и тем же источником

Методы веб-хранилища

  • setItem (key, value)- сохранить пару ключ-значение
  • getItem (key) - получить сохраненное значение по ключу
  • removeItem(key)- удалить пару ключ / значение по ключу
  • clear() - удалить все сохраненные данные
  • key(index) - получить ключ на заданной позиции
  • length- возвращает количество сохраненных элементов

Примеры

Проверьте, поддерживается ли localStorage в браузере и хранится ли что-нибудь в данный момент:

Добавить данные вlocalStorage:

Получить данные отlocalStorage:

Обновить данные inlocalStorage:

Удалить данные inlocalStorage:

Очистить все данные inlocalStorage:

Добавление объектов JSON вlocalStorage:

Поскольку localStorageonly supportsstrings, мы используем JSON.stringify() для преобразования нашего объекта в строку

Однако повторное получение этого предмета приведет к:

"{"toppings":"Pineapple and Ham","scandalous":"very"}"

Получить объекты JSON отlocalStorage:

Мы используем JSON.parse() для преобразования содержимого обратно в наш тип данных.

Случаи применения

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

Хотя файлы cookie могут использоваться для аналогичных типов хранилищ, они имеют значительно более низкие пределы хранения и отправляют данные на сервер с каждым HTTP-запросом.

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