2021-02-10 08:01:09
Объекты веб-хранилища 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, то каждое из них будет реагировать на обновления, произошедшие в другом окне.
3.9K views05:01
![Логотип телеграм канала @frontendnoteschannel — Frontender's notes [ru]](https://logos.telegram-store.com/channels/frontendnoteschannel/telegram_logo.jpg){kind=logo}
F
