Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage) и даже после перезапуска браузера (при использовании localStorage). Скоро мы это увидим.

Но ведь у нас уже есть куки. Зачем тогда эти объекты?

• В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
• Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
• Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

• setItem(key, value) – сохранить пару ключ/значение.
• getItem(key) – получить данные по ключу key.
• removeItem(key) – удалить данные с ключом key.
• clear() – удалить всё.
• key(index) – получить ключ на заданной позиции.
• length – количество элементов в хранилище.

Как видим, интерфейс похож на Map (setItem/getItem/removeItem), но также позволяет получить доступ к элементу по индексу – key(index).

Давайте посмотрим, как это работает.

Демо localStorage

Основные особенности localStorage:

• Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
• Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Например, если запустить этот код…

localStorage.setItem('test', 1);

…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:

alert( localStorage.getItem('test') ); // 1

Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.

Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.

Доступ как к обычному объекту

Также можно получать/записывать данные, как в обычный объект:

// установить значение для ключа
localStorage.test = 2;

// получить значение по ключу
alert( localStorage.test ); // 2

// удалить ключ
delete localStorage.test;

Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:

1. Если ключ генерируется пользователем, то он может быть каким угодно, включая length или toString или другой встроенный метод localStorage. В этом случае getItem/setItem сработают нормально, а вот чтение/запись как свойства объекта не пройдут:

    

    

   let key = 'length';
   localStorage[key] = 5; // Ошибка, невозможно установить length

2. Когда мы модифицируем данные, то срабатывает событие storage. Но это событие не происходит при записи без setItem, как свойства объекта. Мы увидим это позже в этой главе.

   Только строки

   Обратите внимание, что ключ и значение должны быть строками.

   Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:

    

    

   localStorage.user = {name: "John"};
   alert(localStorage.user); // [object Object]

   Мы можем использовать JSON для хранения объектов:

    

    

   localStorage.user = JSON.stringify({name: "John"});
   
   // немного позже
   let user = JSON.parse( localStorage.user );
   alert( user.name ); // John

   Также возможно привести к строке весь объект хранилища, например для отладки:

    

    

   // для JSON.stringify добавлены параметры форматирования, чтобы объект выглядел лучше
   alert( JSON.stringify(localStorage, null, 2) );

   sessionStorage

   Объект sessionStorage используется гораздо реже, чем localStorage.

   Свойства и методы такие же, но есть существенные ограничения:

   • sessionStorage существует только в рамках текущей вкладки браузера.
     • Другая вкладка с той же страницей будет иметь другое хранилище.
     • Но оно разделяется между ифреймами на той же вкладке (при условии, что они из одного и того же источника).
   • Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.