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

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

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

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

Storage

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

Window

Web Storage API расширяет Window объект, добавляя к нему два новых свойства  — Window.sessionStorage и Window.localStorage — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным Storage объектам, и Window.onstorage (en-US) обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)

StorageEvent (en-US)

Событие storage срабатывает на объекте документа Window при изменении объекта хранилища.

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

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

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

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

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

• Использование Web Storage API
• HTML5 Storage API By Venkatraman