Веб хранилище (API)
Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).
Основы Веб хранилища и его использование
В основе Веб хранилища лежат два механизма:
хранилище сессии (sessionStorage)
обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)локальное хранилище (localStorage)
делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.
Обе функции доступны через Window.sessionStorage
и Window.localStorage
свойства (если быть более точным, в браузерах, поддерживающих хранилища объект Window
выполняет объекты WindowLocalStorage
и WindowSessionStorage
, которые содержат свойства localStorage
и sessionStorage
) — вызов одного из них создаёт представление объекта Storage
, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга.
Примечание: Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохранённых для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.
Примечание: Доступ к веб хранилищу из iFrame третьей стороны запрещён, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).
Примечание: Web Storage это не тоже самое, что mozStorage (Mozilla's XPCOM интерфейсы для SQLite) или Session store API (XPCOM утилита хранения для расширений).
Интерфейсы Веб хранилища
Storage
-
Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилища (сессии или локального).
Window
-
Web Storage API расширяет
Window
объект, добавляя к нему два новых свойства —Window.sessionStorage
иWindow.localStorage
— которые предоставляют доступ к сессии текущего домена и к соответствующим локальнымStorage
объектам, иWindow.onstorage
обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента) StorageEvent
-
Событие
storage
срабатывает на объекте документа Window при изменении объекта хранилища.
Примеры
Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдёте элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите её снова, ваши настройки восстановились.
Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие StorageEvent
. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая информация.
Спецификации
Specification |
---|
HTML Living Standard # webstorage |
Совместимость с браузерами
api.Window.localStorage
BCD tables only load in the browser
api.Window.sessionStorage
BCD tables only load in the browser
Приватный режим/Инкогнито
Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остаётся после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.
Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.
Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специально посвящённый этой теме.