Веб хранилище (API)

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

Основы Веб хранилища и его использование

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

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

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

Замечание: Доступ к веб хранилищу из 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 объектам.
StorageEvent
Событие storage event срабатывает при изменении объекта хранилища.

Примеры

Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера, вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мнгновенно меняется. В дополнении, ваш выбор сохраняется в локальном хранилище, чтобы если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановятся. 

Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие StorageEvent. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая иформация.

Спецификации

Спецификация Статус Комментарий
Web Storage (Second edition) Рекомендация  

Поддержка браузерами

Функция Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Функция Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 iOS 3.2

У каждого браузера свои объемы localStorage и sessionStorage. Здесь об ограничениях размеров хранилищ для разных браузеров.

Замечание:  Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.

Приватный режим/Инкогнито

Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на этот пост блога WHATWG, специонально посвященный этой теме.

Смотрите также

Использование Web Storage API

Метки документа и участники

 Внесли вклад в эту страницу: k4o4, BychekRU, lerniri, ViT09
 Обновлялась последний раз: k4o4,