Одним из значительных нововведений в Internet Explorer 8 является поддержка технологии DOM Storage, которая представляет собой часть новых технологий грядущего стандарта HTML 5. Dom Storage (или как его еще называют Web Storage) – это механизм, который призван предоставить разработчику возможность хранить набор данных значительного объема на стороне клиента и получать к ним доступ с помощью специального API. На данный момент, полная поддержка DOM Storage реализована в браузерах Firefox 3.5 (с 2.0 существует частичная поддержка), Safari 4.0 и Internet Explorer 8, в котором эта поддержка появилась с версии beta2. Рассмотрим, что представляет собой эта технология, для чего она нужна и как работает.Необходимость
Необходимость в хранилище данных на стороне клиента, которое предоставляет браузер назрела давно. Последние несколько лет web-технологии все больше сдвигаются со стороны сервера в сторону клиента, все больше вычислений, обработки данных и операций производится на компьютере у пользователя, а не на web-сервере. Частично проблему с хранением данных решал механизм cookie, но как известно он имеет ряд существенных ограничений и даже минусов:
- cookie имеет ограничение по размеру, Internet Explorer до 8 версии позволял хранить в cookie до 4 килобайт данных, в восьмой версии эта планка поднята до 10 килобайт, но все равно такой размер – это существенный недостаток;
- данные cookie участвуют в формировании каждого запроса к серверу, то есть при каждом запросе к серверу все cookie автоматически отправляются вместе с запросом, что увеличивает трафик;
- cookie сопоставлены с web-сайтом и, если пользователь работает с сайтом через две вкладки, он оперирует одними и теми же данными cookie. Этот момент может нарушить правильную работу сайта и ограничивает применение cookie.
C другой стороны механизм DOM Storage в Internet Explorer предлагает следующие возможности:
- до 10 мегабайт для хранения данных для каждого сайта (5 Mb в Firefox);
- доступ только на стороне клиента, данные DOM Storage не отправляются вместе с запросами;
- два механизма localStorage и sessionStorage позволяют гибко управлять данными, контекст sessionStorage и его данные существуют только для одной вкладки и если пользователь закроет ее или откроет еще одну то, данные из вкладки доступны не будут.
* localStorage появился в Firefox 3.5, sessionStorage присутствовал в Firefox с версии 2.0.
API
Согласно черновику спецификации Web Storage браузер должен реализовать три следующих объекта для работы с локальным хранилищем:
- storage – представляет собой объект, который осуществляет доступ к набору данных хранилища. Согласно спецификации набор данных должен представлять собой пары строк “ключ-значение”. Данные отличные от строковых, должны быть приведены к строкам перед сохранением в хранилище;
- window.sessionStorage – возвращает объект типа storage и представляет собой хранилище пользовательского набора данных которое существует и актуально только для одной вкладки браузера до тех пор, пока она не будет закрыта;
- window.localStorage – похож на sessionStorage за исключением того, что данные этого хранилища сохраняются после закрытия вкладки и доступны всегда, что делает этот объект похожим на cookie. Каждый домен и субдомен имеет свой объект window.localStorage.
* Firefox поддерживает еще один, не описанный в стандарте, объект window.globalStorage.
По сути, при работе с данными, сохранением или получением из хранилища, разработчик оперирует с экземпляром объекта storage, который имеет ряд вспомогательных функций и свойств:
- setItem, getItem, removeItem – создает, получает или удаляет новый элемент данных;
- clear – “стирает” все данные хранилища;
- length – возвращает количество сохраненных элементов данных;
* Internet Explorer 8 предлагает еще одно полезное свойство remainingSpace, которое позволяет узнать объем в байтах, которое занимает хранилище. Пока, это свойство не включено в черновик спецификации и не является стандартным.
Пример
Простейший пример работы с localStorage, данные сохраняются и достаются из хранилища:
…
sessionStorage.someDataKeyName = ‘данные’;
…
var data = sessionStorage.someDataKeyName;
…
Обратите внимание, что создавать и получать доступ к данным в хранилищах DOM Storage можно не только через индексаторы типа sessionStorage[ 'someDataKeyName' ], но и через псевдосвойства. Первая попытка записать данные в такое свойство создаст его экземпляр в хранилище.
Данные объекта window.localStorage могут быть доступны как для субдомена так и для родительского домена, скажем следующий пример при работе с доменом test.example.com сработает:
…
var someStorage = localStorage[‘элемент example.com’];
…
Однако, к другим субдоменам test.example.com доступа не имеет, следующий пример для контекста test.example.com неверный:
…
var someStorage = localStorage[‘элемент mail.example.com’];
…
Заключение
В этой статье я постарался рассмотреть относительно новый механизм DOM Storage, который является частью HTML 5 полностью поддерживается Internet Explorer 8. К сожалению, еще не все браузеры поддерживают DOM Storage, так например поддержка отсутствует у браузеров Chrome и Opera. Это в некоторой мере мешает распространению технологии, которая может стать очень полезной при разработке клиентских web-страниц с богатым функционалом.
DOM Storage помогает работать с данными на стороне клиента и приходит на смену механизму cookie, используемому для этих целей ранее. Снимая ограничения определенные механизмом cookie, DOM Storage предлагает не менее простой и эффективный способ хранения данных.
Дополнительная информация
Статья MSDN с описанием DOM Storage http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
Видео How I do на MSDN с описанием http://msdn.microsoft.com/en-us/ie/dd535732.aspx
Статья John Resig о DOM Storage http://ejohn.org/blog/dom-storage/
Сравнение браузеров по функционалу http://robertnyman.com/javascript/
DOM Storage в wiki http://en.wikipedia.org/wiki/DOM_storage
Черновик спецификации Web Storage http://dev.w3.org/html5/webstorage/
