В этом руководстве вы узнаете о типе Storage
и о том, как использовать localStorage
хранилище JavaScript для хранения постоянных данных.
Тип Storage
предназначен для хранения пар имя-значение. Тип Storage
— это Object
со следующими дополнительными методами:
setItem(name, value)
– установить значение для имени.removeItem(name)
— удалить пару «имя-значение», идентифицированную по имени.getItem(name)
— получить значение для заданного имени.key(index)
– получить имя значения в заданной числовой позиции.clear()
— удалить все значения.
Чтобы получить количество пар имя-значение в объекте Storage
, вы можете использовать свойство length
.
Объект Storage
может хранить только строки. Он автоматически преобразует нестроковые данные в строку перед их сохранением.
Когда вы извлекаете данные из объекта Storage
, вы всегда получаете строковые данные.
Объект
Спецификация HTML5 представляет localStorage
как способ хранения данных без даты истечения срока действия в веб-браузерах.
Другими словами, данные, хранящиеся в браузерах, сохранятся даже после того, как вы закроете окна браузера.
Данные, хранящиеся в localStorage
, привязаны к источнику, который уникален для protocol://host:port
.
Сравнение localStorage и файлов cookie
Во-первых, данные, хранящиеся в localStorage
, не отправляются на сервер при каждом запросе, как файлы cookie. По этой причине вы можете хранить больше данных в localStorage
.
Большинство современных веб-браузеров позволяют хранить до 5 МБ данных. Обратите внимание, что вы можете хранить до 4 КБ в файлах cookie.
Во-вторых, данные, хранящиеся в localStorage
, могут управляться клиентом, в частности JavaScript в веб-браузере. Он не может быть доступен для серверов.
Однако файлы cookie могут управляться как с помощью JavaScript в веб-браузерах, так и на серверах.
Доступ к локальному хранилищу
Вы можете получить доступ к хранилищу через свойство объекта window
:
window.localStorage
Поскольку localStorage
является экземпляром типа Storage
, вы можете вызывать методы типа Storage
для управления данными.
Когда вы вводите следующий код в консоли:
window.localStorage
Вы увидите следующий объект:
Storage {length: 0}
1) Метод setItem()
Далее используется метод setItem()
для сохранения пары «имя-значение» в localStorage
:
window.localStorage.setItem('theme','dark');
2) Свойство length
Чтобы получить количество пар имя-значение, вы используете свойство length
следующим образом:
console.log(window.localStorage.length); // 1
Поскольку объект window
является глобальным, вам не нужно указывать его явно. Например:
console.log(localStorage.length); // 1
3) Метод getItem()
Чтобы получить значение по ключу, вы используете метод getItem()
. В следующем примере используется метод getItem()
для получения значения ключа theme
:
localStorage.getItem('theme'); // 'dark'
4) Метод removeItem()
Чтобы удалить пару имя-значение по ключу, вы используете метод removeItem()
. Например:
localStorage.removeItem('theme');
5) Перебираем ключи
Следующее сохраняет три пары «имя-значение» в localStorage
:
localStorage.setItem('theme','light'); localStorage.setItem('backgroundColor','white'); localStorage.setItem('color','#111');
Для перебора пар имя-значение, хранящихся в localStorage
, вы используете метод Object.keys()
с циклом for...of
:
let keys = Object.keys(localStorage); for(let key of keys) { console.log(`${key}: ${localStorage.getItem(key)}`); }
Выход:
color: #111 theme: light backgroundColor: white
Хранение объектов
Тип Storage
хранит только строковые данные. Чтобы хранить объекты, вам нужно преобразовать их в строки с помощью JSON.stringify()
. Например:
const settings = { backgroundColor: '#fff', color: '#111', theme: 'light' }; localStorage.setItem('settings', JSON.stringify(settings)); console.log(localStorage.getItem('settings'));
Вывод:
'{"backgroundColor":"#fff","color":"#111","theme":"light"}'
Следующий пример извлекает значение из localStorage
и преобразует его обратно в объект с помощью JSON.parse()
.
let storedSettings = JSON.parse(localStorage.getItem('settings')); console.log(storedSettings);
Событие хранения
Когда вы вносите изменения в объект Storage
, для документа запускается событие storage
.
Событие происходит в следующих сценариях:
- Сохраните пару «имя-значение», вызвав метод
setItem()
. - Удалите пару «имя-значение», вызвав метод
removeItem()
. - И удалите все значения, вызвав метод
clear()
.
Событие storage
имеет следующие свойства:
domain
– домен, на который меняется хранилище.key
— ключ, который был установлен или удален.newValue
— значение, на которое был установлен ключ, илиnull
, если ключ был удален.oldValue
— значение до установки или удаления ключа.
Чтобы прослушать событие storage
, вы используете метод addEventListener()
объекта window
следующим образом:
addEventListener('storage', function(e){ console.log(`The value of the ${e.key} changed for the ${e.domain}.`); });
Заключение
- Тип
Storage
предоставляет вам методы хранения и управления данными в веб-браузерах. localStorage
— это экземпляр типаStorage
, который позволяет хранить постоянные данные в веб-браузерах.localStorage
может хранить только строки. Для хранения объектов вы конвертируете их в строки с помощьюJSON.stringify()
. И вы конвертируете строки в объекты, когда извлекаете их из хранилища с помощьюJSON.parse()
.