Хранилище Web: более удобное и мощное хранилище клиентских данных

Шветанк Диксит · 2 марта 2010 г.

Введение

Приложения Web становятся все более развитыми с каждым днем, со все более продуманным использованием JavaScript, а также появляющихся стандартов и технологий. Мы все в большей степени полагаемся на эти приложения, многие из них становятся частью нашей повседневной жизни. Одной из областей, в которой разработка приложений Web отстает от потребностей, является хранение данных на стороне клиента. То есть, до сих пор.

Хранилище Web (http://dev.w3.org/html5/webstorage/) является спецификацией W3C, которая предоставляет функции для сохранения данных на стороне клиента до конца сеанса (Session Storage – сессионное хранилище), или после завершения сеанса (Local Storage – локальное хранилище). Это значительно более мощное средство, чем традиционные cookies, и более простое в использовании. В этой статье мы посмотрим, почему это так, и как можно его использовать.

Существующая проблема: cookies могут разрушаться

Прежде чем двигаться дальше, давайте коротко разберем, почему текущий способ хранения данных на стороне клиента — cookies — является проблемой:

• Маленький размер: Cookies обычно имеют максимальный размер около 4KB, что не слишком хорошо подходит для хранения сложных данных любого вида.
• С помощью cookies трудно отслеживать две или больше транзакций на одном и том же сайте, которые могут происходить в двух или более различных вкладках.
• Cookies могут использоваться злонамеренно с помощью так называемой техники межсайтового скриптинга, что приводит к проблемам безопасности.

Другие (менее популярные) альтернативы для cookies включают методы, использующие строки запросов, скрытые поля форм, совместно используемые локальные объекты на основе flash, и т.д. Каждый со своим собственным набором проблем, связанным с безопасностью, легкостью использования, ограничениями на размер, и т.д. Поэтому до сих пор мы используем достаточно плохие способы хранения данных на стороне пользователя. Нам требуется улучшенный способ, и здесь на помощь приходит Хранилище Web.

Хранилище Web

Спецификация Хранилища Web W3C (http://dev.w3.org/html5/webstorage/) была разработана для улучшения способа хранения данных на стороне клиента. Она имеет два различных типа хранилища: Session Storage (Сессионное хранилище) и Local Storage (Локальное хранилище).

Как сессионное, так и локальное хранилище будут иметь возможность хранить около 5Mb данных на домен, что значительно больше чем cookies. По мере дальнейшего чтения вы больше узнаете о них, и о том, что делает хранилище Web более удобным механизмом хранения.

Сессионное хранилище

Сессионное хранилище имеет единственное предназначение: Запоминать все данные сеанса и забывать их, как только закрывается используемая вкладка (или окно).

Задание и извлечение данных

Чтобы задать пару ключ значение в сессионном хранилище, необходимо написать просто строку следующего вида:

sessionStorage.setItem(yourkey, yourvalue);

Чтобы снова извлечь данные, необходимо написать:

var item = sessionStorage.getItem(yourkey);

Чтобы сохранить значение "This is a sample sentence" в сессионном хранилище, можно написать:

sessionStorage.setItem(1, 'This is a sample sentence');

Здесь значением ключа будет 1, но это не значит, что это вообще первое значение. Число 1 просто преобразуется в строку '1', которая используется в качестве ключа, но это не помещает эту пару ключ значение в первую позицию.

А чтобы извлечь это предложение в предупреждающем сообщении JavaScript, необходимо написать:

var item = sessionStorage.getItem(1);
alert(item);

Другим примером setItem() может быть:

sessionStorage.setItem('name', 'john');

а извлечь значение можно с помощью

var name = sessionStorage.getItem('name');

Удаление данных

Существуют также методы для удаления данных из сессионного хранилища. Метод removeItem() используется для удаления определенного объекта из списка:

var item = sessionStorage.removeItem(yourkey);

Помните, что можно также сослаться просто на ключ объекта и удалить его из списка следующим образом:

var items = sessionStorage.removeItem(1);

Метод clear() используется для удаления всех объектов в списке; он применяется следующим образом:

sessionStorage.clear();

Можно использовать также атрибут length, чтобы определить число пар ключ/значение в хранилище, следующим образом:

var no_of_items = sessionStorage.length;

Локальное хранилище

Локальное хранилище используется, если требуется, чтобы данные сохранялись более чем для одного сеанса. Простым примером использования будет подсчет количества посещений пользователем страницы Web. Когда страница использует локальное хранилище, страница (или окно) можно закрыть и снова открыть, и, тем не менее, показать сохраненные данные — т.е. обеспечивается постоянное хранение.

Сохранение и извлечение данных в локальном хранилище работает аналогично сессионному хранилищу: оно использует такие же имена функций setItem() и getItem(). Чтобы сохранить предложение в локальном хранилище, нужно написать что-нибудь следующего вида:

localStorage.setItem(1, 'This is a sample sentence');

а чтобы извлечь его:

var data = localStorage.getItem(1);

Также как и сессионное хранилище, локальное хранилище поддерживает атрибут length, и функции removeItem() и clear().

Как в сессионном хранилище, так и в локальном функция clear() имеет одну задачу – удалить все значения из списка. Это означает, что если вызвать, например, функцию localStorage.clear(), то она удалит все локальное хранилище из этого источника. Поэтому все данные локального хранилища из, скажем, (такие как www.example.org, www.example.org:80, www.example.org/abc/, www.example.org/xyz/) будут удалены. Тем не менее, хранилище, скажем, для abc.example.org этим затронуто не будет. Однако для сессионного хранилища она будет очищать хранилище только для текущей сессии.

Простой пример

Чтобы проиллюстрировать хранилище Web в действии, был создан небольшой пример, который использует, как локальное, так и сессионное хранилище. Посмотрите демонстрационную страницу хранилища Web, чтобы увидеть его в действии (http://people.opera.com/shwetankd/external/demos/webstorage_demo.htm). Пример попросит ввести две строки, одну для сессионного хранилища, и другую для локального хранилища. Затем можно открыть Storage Inspector в Opera Dragonfly, чтобы получить доступ к хранилищу Web. Можно заметить, что если закрыть страницу, а затем снова ее открыть, данные, введенные для локального хранилища, сохраняются, в то время как для сессионного хранилища, это будет не так.

Использование событий хранилища

Спецификация предоставляет также событие хранилища (http://dev.w3.org/html5/webstorage/#the-storage-event), которое будет порождаться, когда область хранилища изменяется. Оно имеет различные полезные атрибуты, такие как:

• storageArea: Говорит, какой это тип хранилища (сессионное или локальное)
• key: Изменяющийся ключ.
• oldValue: Старое значение ключа.
• newValue: Новое значение ключа.
• url: URL страницы, ключ которой изменился.

Если вызвать метод clear(), то атрибуты key, oldValue и newValue устанавливаются пустыми. Здесь имеется модифицированная версия упомянутого ранее демонстрационного примера страницы (http://people.opera.com/shwetankd/external/demos/webstorage_demo2.htm), в этот раз использующая события хранилища, чтобы пользователи могли знать об изменениях в значениях. Если ввести значение, а затем снова его изменить, то можно будет видеть предупреждение, упоминающее новое и старое значения.

Где можно получить детальный доступ к данным хранилища Web в браузере?

В Opera 10.50+ существует несколько способов, как это можно сделать. Можно ввести opera:webstorage, а также opera:config#PersistentStorage в поле адреса, чтобы получить доступ к высокоуровневым данным хранилища Web (какой лимит хранилища, где оно находится, и т.д.), но для разработчиков существует лучший способ получить подробную информацию о хранилище Web для конкретной страницы — с помощью Storage Inspector в Opera Dragonfly, который предоставляет значительно более подробную информацию.

Opera 10.50+ имеет новую и улучшенную утилиту отладки Opera Dragonfly (которая была опубликована как проект с открытым исходным кодом - http://www.opera.com/dragonfly/). Среди исправлений, усовершенствований и новых свойств появился Storage Inspector (Инспектор хранилища). Он создает для разработчиков отдельную вкладку для доступа к информации о cookies и локальном и сессионном хранилище страницы. Откройте Opera Dragonfly и щелкните на вкладке Storage, чтобы получить к ней доступ.

Что нужно помнить при использовании хранилища Web

Хранилище на источник: Все данные из одного и того же источника будут совместно использовать одно пространство хранения. Источником является тройка схема/хост/порт (или глобально уникальный идентификaтор). Например, http://www.example.org и http://abc.example.org являются двумя отдельными источниками, также как http://example.org и https://example.org, а также http://example.org:80 и http://example.org:8000

Лимит хранилища: В настоящее время большинство браузеров, которые реализовали хранилище Web, включая Opera, определяют лимит хранилища как 5 Mb на домен. Можно изменить этот лимит хранилища для каждого домена отдельно, сохраняя какие-то данные из домена в сеансовом или локальном хранилище, а затем переходя к opera:webstorage. Этот домен появится тогда в списке, и можно будет щелкнуть на кнопке, чтобы получить доступ к статистике и параметрам, включая размер данных, сохраненных для этого домена, какой имеется лимит хранилища, и что браузер будет делать, когда лимит будет исчерпан.

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

Где не надо использовать: Если два различных пользователя используют различные пути доступа на одном домене, они могут получить доступ к области хранения всего источника, и поэтому к данным друг друга. Поэтому в настоящее время не рекомендуется использовать хранилище Web на своих страницах пользователям свободных хостов, которые имеют свои сайты в различных каталогах одного и того же домена (например, freehostingspace.org/user1/ и freehostingspace.org/user2/ ).

Хранилище Web не является частью спецификации HTML5: Это целая спецификация сама по себе (http://dev.w3.org/html5/webstorage/).