Знакомство с хранилищем DOM

API хранилища DOM включает два связанных механизма для безопасного хранения клиентских данных с использованием модели DOM (Document Object Model): sessionStorage и localStorage. Эти объекты были введены в браузере Internet Explorer 8.

Примечание. В более ранних версиях Internet Explorer долговременное хранение данных реализовано посредством реакции на изменение userData.

В этом разделе представлены следующие подразделы:

• Что такое хранилище DOM
• Объекты выполнения сценариев хранилища DOM
  • window.sessionStorage
  • window.localStorage
  • Объект хранилища
• События хранилища DOM
  • onstorage
  • onstoragecommit
• Безопасность и конфиденциальность
  • Контекст просмотра верхнего уровня и исходный объект
  • Пределы хранилища определяются исходным объектом
  • Очистка областей хранения
• См. также

Что такое хранилище DOM

Хранилище DOM часто сравнивают с файлами Cookie протокола HTTP. С помощью хранилища DOM, как и с помощью файлов Cookie, веб-разработчики могут сохранять в клиенте данные для конкретного сеанса или специфические данные домена в качестве пар имя-значение. Но в отличие от файлов Cookie при использовании хранилища DOM проще управлять отображением в окне информации, сохраненной в другом окне.

Например, пользователь может открыть два окна браузера, чтобы купить авиабилеты на два разных рейса. Однако, если в веб-приложении авиакомпании используются файлы Cookie для сохранения состояния сеанса, возможна «утечка» информации из одной транзакции в другую, в результате которой пользователь может купить два билета на один и тот же рейс без соответствующего уведомления. По мере того как приложения получают все больше возможностей автономной работы, таких как локальное сохранение значений для последующего возврата на сервер, вероятность такой «утечки» информации возрастает.

Хранилище DOM может предоставить значительно больше дискового пространства, чем файлы Cookie. В Internet Explorer в файлах Cookie можно сохранить только 4 КБ данных. Это может быть одна пара имя-значение объемом 4 КБ или до 20 пар имя-значение общим объемом 4 КБ. В хранилище DOM предоставляется приблизительно 10 МБ для каждой области хранения.

С функциональной точки зрения области хранения в клиенте значительно отличаются от файлов Cookie. Из хранилища DOM значения не передаются на сервер с каждым запросом, как в файлах Cookie, и срок действия данных в локальной области хранения никогда не истекает. В отличие от файлов Cookie в хранилище DOM проще осуществлять доступ к отдельным фрагментам данных с использованием стандартного интерфейса, который приобретает все более широкую поддержку у поставщиков браузеров.

Объекты выполнения сценариев хранилища DOM

• window.sessionStorage
• window.localStorage
• Объект хранилища

window.sessionStorage

Функция сохранения сеанса предназначена для сценариев, в которых пользователь выполняет одну транзакцию. Атрибут sessionStorage объекта window определяет пары ключ-значение для всех страниц, загруженных за время существования отдельной вкладки (для действия в период существования контекста просмотра на верхнем уровне). Например, на странице имеется флажок, который пользователю нужно установить, чтобы указать, что ему требуется страхование (в примере — «I want insurance on this trip»).

<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

На одной из последующих страниц проверяется (из сценария), установил ли пользователь флажок.

if (sessionStorage.insurance) { ... } 

Объект Storage поддерживает свойства «expando» (в предыдущем примере «insurance»). Если имени свойства не существует, для него автоматически создается пара ключ-значение. Обратите внимание, что пары ключ-значение всегда сохраняются как строки. Данные других типов, такие как числа, логические значения и структурированные данные, необходимо преобразовывать в строки, прежде чем сохранять в области хранения.

После того как значение сохранено в объекте sessionStorage, его можно загрузить посредством выполнения сценария на другой странице в том же контексте. Когда загружается другой документ, sessionStorage инициализируется из памяти для тех же исходных URL-адресов. (Дополнительную информацию см. в разделе Безопасность и конфиденциальность.)

Примечание. Хотя это допускается протоколом HTML 5 (рабочий проект)  , Internet Explorer 8 не восстанавливает sessionStorage после возобновления работы браузера после сбоя.

window.localStorage

Механизм локального хранения распространяется на несколько окон и сохраняется после текущего сеанса. Атрибут localStorage предоставляет области постоянного хранения для доменов. Для повышения производительности веб-приложения можно сохранять в клиенте около 10 МБ пользовательских данных, таких как целые документы или почтовый ящик пользователя.

Например, на веб-сайте может отображаться счетчик посещений страницы пользователем с использованием следующего сценария.

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script> 

Примечание. Перед приращением счетчика pageLoadCount его значение необходимо преобразовать в число с помощью метода parseInt (JScript 5.6).

В каждом домене и поддомене имеется собственная локальная область хранения. Домены имеют доступ к областям хранения поддоменов, а поддомены имеют доступ к областям хранения родительских доменов. Например, область localStorage['example.com'] доступна домену example.com и всем его поддоменам. Область localStorage['www.example.com'] поддомена доступна домену example.com, но недоступна другим поддоменам, таким как mail.example.com.

Объект хранилища

Объекты сеанса и локального хранилища поддерживают следующие свойства и методы:

Метод clear

Удаление всех пар ключ-значение из области хранения DOM.

Свойство constructor

Возвращение ссылок на конструктор объекта.

Метод getItem

Получение текущего значения, связанного с ключом хранилища DOM.

Метод key

Получение ключа при заданном индексе в коллекции.

Свойство length

Получение длины списка ключ-значение.

Свойство remainingSpace

Получение оставшегося объема памяти (в байтах) для объекта хранения.

Метод removeItem

Удаление пары ключ-значение из коллекции хранилища DOM.

Метод setItem

Задание пары ключ-значение.

События хранилища DOM

Когда происходит изменение области хранения, в Internet Explorer инициируются события, позволяющие синхронизировать информацию между различными экземплярами браузера или вкладками.

Поддерживаются следующие события:

• onstorage
• onstoragecommit

onstorage

Событие onstorage инициируется в объекте document при изменении области хранения. Получают событие все документы, совместно использующие контекст сеанса, а также те, в которых сейчас отображается страница для одного и того же домена или поддомена, с которым связано локальное хранилище.

Если целевой документ объекта в настоящее время неактивен, в Internet Explorer никакие события не инициируются.

onstoragecommit

В Internet Explorer для хранения локального хранилища используются XML-файлы. Событие onstoragecommit инициируется, когда локальное хранилище записывается на диск.

Безопасность и конфиденциальность

Данные, сохраняемые в локальном хранилище, гораздо более открыты, чем сохраняемые в файлах Cookie, для которых в качестве ограничения можно задать определенный путь внутри домена. Даже выбор ключа, который сложно разгадать, не может обеспечить конфиденциальность, поскольку существует возможность нумерации объекта хранилища.

Далее рассматриваются следующие вопросы:

• Контекст просмотра верхнего уровня и исходный объект
• Пределы хранилища определяются исходным объектом
• Очистка областей хранения

Контекст просмотра верхнего уровня и исходный объект

Доступ к области хранения для сеанса ограничен контекстом просмотра верхнего уровня. В Internet Explorer для каждой вкладки создается новый контекст просмотра. Сценарий, выполняемый в контексте просмотра верхнего уровня, не имеет доступа к хранилищу, созданному в другом контексте. Веб-сайты могут добавлять данные в хранилище сеанса, и эти данные будут доступны любой странице из этого исходного объекта, открытой в том же окне.

Исходный объект определяется протоколом, именем узла (или IP-адресом) и номером порта в URL-адресе документа. Доступ сценария к данным хранилища разрешен только в том случае, если исходный объект сценария соответствует исходному объекту области хранения.

Пределы хранилища определяются исходным объектом

Дисковые квоты применяются к домену страницы, задающей значение, а не домену, в котором значение задается. Это не позволяет вредоносным сценариям использовать больше пространства, чем определено квотой соответствующего домена. Это не позволяет также подобным сценариям сохранять в произвольных поддоменах неограниченные объемы данных.

Размер хранилища определяется как общая длина всех имен и значений ключей; одна область хранения может содержать до 10 миллионов байтов. С помощью свойства remainingSpace можно определить доступное пространство хранилища.

Очистка областей хранения

Состояние сеанса освобождается сразу после того, как закрывается последнее окно для ссылки на данные. Однако пользователи могут очищать области хранения в любое время; для этого в меню «Сервис» Internet Explorer нужно выбрать пункт «Удалить журнал обозревателя», затем установить флажок «Файлы Cookie» и нажать кнопку «ОК». При этом выполняется очистка сеанса и локальных областей хранения для всех доменов, не входящих в папку «Избранное», и сбрасываются квоты в реестре. Чтобы удалить все области хранения независимо от источника, снимите флажок «Сохранить данные избранных веб-узлов».

Чтобы удалить пары ключ-значение из списка хранилища, удаляйте их последовательно во всей коллекции с помощью метода removeItem или используйте метод clear, чтобы удалить сразу все элементы. Помните, что изменения локальной области хранения сохраняются на диск асинхронно.

См. также

• HTML 5 (рабочий проект)