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, специонально посвященный этой теме.