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
. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая иформация.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard | Живой стандарт |
Поддержка браузерами
Функция | 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, специонально посвященный этой теме.