​​Объекты веб-хранилища LocalStorage, sessionStorage. Объек | Frontender's notes [ru]

​​Объекты веб-хранилища LocalStorage, sessionStorage.

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage) и даже после перезапуска браузера (при использовании localStorage). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Поэтому мы можем хранить гораздо больше данных. Большинство браузеров могут сохранить как минимум 2 мегабайта данных (или больше), и этот размер можно поменять в настройках.
Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

setItem(key, value) – сохранить пару ключ/значение.

getItem(key) – получить данные по ключу key.

removeItem(key) – удалить данные с ключом key.

clear() – удалить всё.

key(index) – получить ключ на заданной позиции.

length – количество элементов в хранилище.
Как видим, интерфейс похож на Map

(setItem/getItem/removeItem), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу – key(index).
бъект sessionStorage используется гораздо реже, чем localStorage.Свойства и методы такие же, но есть существенные ограничения:

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

…Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null, что значит «ничего не найдено».
Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

Событие storage
Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage со следующими свойствами:

key – ключ, который обновился (null, если вызван .clear()).

oldValue – старое значение (null, если ключ добавлен впервые).

newValue – новое значение (null, если ключ был удалён).

url – url документа, где произошло обновление.
storageArea – объект localStorage или sessionStorage, где произошло обновление.
Важно: событие срабатывает на всех остальных объектах window, где доступно хранилище, кроме того окна, которое его вызвало.
Давайте уточним.
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
Теперь, если оба окна слушают window.onstorage, то каждое из них будет реагировать на обновления, произошедшие в другом окне.