Короче говоря, 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
. И в отличие от всех других методов, упомянутых выше, этот не требует никаких параметров.
Что вы думаете об этом посте? Это помогло вам? Вы заметили что-то не так? Позвольте мне знать в комментариях ниже!