LocalStorage: локальное хранилище в JavaScript

В этом руководстве вы узнаете о типе 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().