Skip to content

Хранилища

Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).

В основе Веб хранилища лежат два механизма:

  • хранилище сессии (sessionStorage) обслуживает область хранения данных для каждого домена, доступное на протяжении сессии.
  • локальное хранилище (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.

Обе функции доступны через Window.sessionStorage и Window.localStorage свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window выполняет объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage) — вызов одного из них создает представление объекта Storage, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга.

SessionStorage

Свойство sessionStorage позволяет получить доступ к объекту Storage текущей сессии. Свойство sessionStorage очень похоже на свойство Window.localStorage, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, что отличается от поведения session cookies.

// Получаем ссылку на текстовое поле,
// изменение которого будем отслеживать.
var field = document.getElementById("field");

// Проверяем наличие значения 'autosave'
// (это может произойти только если страница будет случайно обновлена)
if (sessionStorage.getItem("autosave")) {
  // Восстанавливаем содержимое текстового поля
  field.value = sessionStorage.getItem("autosave");
}

// Отслеживаем все изменения в текстовом поле
field.addEventListener("change", function() {
  // И сохраняем их в объект session storage
  sessionStorage.setItem("autosave", field.value);
});

LocalStorage

Свойство localStorage предоставляет доступ к объекту Storage для каждого домена; хранимания дата сохраняется между сессиями браузера. Данные в localStorage не имеют expiration time (Данные в localStorage созданные в приватном браузере или в инкогнито режиме очищаются после закрытия последней приватной вкладки браузера)

Данные хранящиеся в localStorage или sessionStorage специфичны для протокола страницы. К примеру, данные сохраненные скриптом на сайте доступном по HTTP будут отдельные от этого же сайта доступного по HTTPS.

Пары ключ\значение всегда в формате UTF-16 DOMString, который использует 2 байта на символ.

DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String. Passing null to a method or parameter accepting a DOMString typically stringifies to "null".

References

Web Storage API