Что такое веб-хранилище?

Веб-хранилище — это хранилище, которое предоставляет ваш браузер (Chrome, Firefox и т. д.), чтобы вы могли хранить свои данные на локальном компьютере. Он может хранить около 10 МБ данных. Веб-хранилище хранит данные в формате пары ключ-значение.

Существует 2 вида веб-хранилища.

  1. Хранилище сеансов. Такое хранилище хранит ваши данные, пока браузер или вкладка не будут закрыты.
  2. Локальное хранилище. Хранение такого типа обеспечивает постоянное хранение ваших данных. Данные все еще существуют, пока вы их не очистите.

Когда использовать веб-хранилище?

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

Как хранить данные в веб-хранилище?

Для взаимодействия с веб-хранилищем необходимо написать код javascript. Поскольку веб-хранилище — это функция браузера, вам необходимо проверить, поддерживается ли ваш браузер.

Для этого вы можете использовать следующий код:

Если тип объекта Хранилище не определен, это означает, что браузер не поддерживает веб-хранилище.

Есть 4 метода, которые вам нужно знать в веб-хранилище.

Storage.setItem(ключ, значение)

Это метод хранения ваших данных в веб-хранилище. Вы можете изменить Storage на localStorage или sessionStorage в зависимости от того, какое хранилище вы хотите использовать. Вот пример:

Вам нужно помнить, что веб-хранилище поддерживает данные только в строковом формате, поэтому, если вы хотите хранить данные в формате массива или JSON. Вам нужно разобрать их на строку. Для этого вы можете использовать метод JSON.stringify.

Storage.getItem(ключ)

Мы можем получить данные, используя ключи, которые мы использовали ранее.

Но помните, когда мы сохраняем данные, мы храним их в строковом формате. Итак, когда мы получаем их, мы получаем строки.

Вот почему нам нужно разобрать их на объекты и массивы с помощью JSON.parse().

Вот что мы получили:

Storage.removeItem(ключ)

Прямо сейчас у нас есть 2 ключа в localStorage. Для удаления мы можем использовать метод removeItem.

Это код:

Теперь у нас осталась только одна запись в localStorage:

Storage.clear()

Вы можете использовать этот метод, чтобы очистить все записи внутри хранилища.

Storage.key(индекс)

Этот метод вернет ключ из определенного индекса записи в хранилище. Хранилище имеет свойство length, поэтому вы знаете, сколько записей вы сохранили, и можете получить ключ к получению записи с помощью.

Хорошо. Это все о веб-хранилище. Я покажу вам реализацию в других статьях.

Спасибо, что читаете мои статьи.