Короче говоря, localStorage позволяет нам хранить данные в браузере пользователя. С его помощью мы можем сохранить полезные данные, даже если страница перезагружается или закрывается.

Также есть sessionStorage, который очень похож, но сохраняется только до закрытия, перезагрузки или восстановления браузера.

Его структура состоит из key и value:

{
  key: 'value';
}

Чтобы работать с этими данными, мы можем использовать эти четыре метода:

  • localStorage.setItem(): для создания новой записи ключ: значение;
  • localStorage.getItem(): для доступа к значению из ключа;
  • localStorage.removetItem(): для удаления определенного ключа и его значений;
  • localStorage.clear(): для удаления всех ранее сохраненных ключей;

Чтобы просмотреть эти сохраненные данные в нашем собственном браузере, мы можем открыть Проверить › Приложение › Локальное хранилище (в Chrome):

Хранение данных с помощью localStorage.setItem()

Как упоминалось ранее, этот метод позволяет нам создать новую запись в браузере пользователя. setItem() принимает два параметра: key и value.

Однако важно знать, что localStorage может хранить строки только как value. Следовательно, для хранения массивов или объектов нам нужно преобразовать любое заданное значение методом JSON.stringify(). Вот как это выглядит:

const fruit = {
    name: “Apple”,
    color: “Red”,
}
localStorage.setItem('keyName', JSON.stringify(fruit))

А вот как это выглядит в браузере:

Доступ к элементам с помощью localStorage.getItem()

Для доступа к элементам мы будем использовать ранее упомянутый метод getItem(). В отличие от setItem(), здесь требуется только один параметр. Это key, который возвращает соответствующие значения.

Давайте продолжим предыдущий пример и получим доступ к значению из ключа keyName:

localStorage.getItem('keyName')

Это вернет нам значение как:

'{"name":"Apple","color":"Red"}'

Чтобы использовать это значение, нам нужно будет снова преобразовать его в объект. Для этого воспользуемся методом JSON.parse().

JSON.parse(localStorage.getItem('keyName'))

Удаление элементов с помощью localStorage.removeItem()

Чтобы удалить ранее сохраненные элементы, мы можем использовать метод removeItem(). Его единственный параметр требует имени ключа, который мы хотим удалить. Так:

localStorage.removeItem('keyName')

Удаление всех элементов с помощью localStorage.clear()

Подобно методу removeItem(), который удаляет определенный элемент, метод clear() удалит все элементы, хранящиеся внутри localStorage. И в отличие от всех других методов, упомянутых выше, этот не требует никаких параметров.

Что вы думаете об этом посте? Это помогло вам? Вы заметили что-то не так? Позвольте мне знать в комментариях ниже!