Pull to refresh

Поддержка HTML 5 DOM Storage

Reading time 4 min
Views 17K
Одним из значительных нововведений в 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/

Progg it
Tags:
Hubs:
+48
Comments 70
Comments Comments 70

Articles