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

    Одним из значительных нововведений в 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
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 70

      0
      А /там не добавят?
        0
        video/audio
          0
          Добавят. С обязательными кодеками пока определяются.
            0
            В IE — не добавят. Выясняют Mozilla, Opera и Apple.
              0
              Зря человека заминусовали. В ИЕ и правда не собираются добавлять поддержку video/audio, и вообще поддержка этих тегов под вопросом, изза всеми любимого Apple. Более подробно уже было написано здесь: habrahabr.ru/blogs/webdev/63476/
      • UFO just landed and posted this here
          +10
          читалъ и плакалъ… Святой W3C, ну неужели скоро, совсем скоро, через каких то год-полтора мы сможем отказаться от куков, эти долбаннутых массивов данных, вечной связки… неужто можно будет делать полуоффлайн-онлайновые приложения… Спасибо HTML5… :)
            0
            там все еще интереснее, может быть хранилища будут поддерживать SQL запросы, посмотрите в черновике
              +1
              если и не будут нативно поддерживать, то доделают как js-библиотека
                +1
                Небуду смотреть… страшно что нервы и мозк не выдержат новых возможностей… :)
                • UFO just landed and posted this here
                  0
                  Этот ужас вообще непонятно зачем.
                  Сперва SQL, а потом люди делают ORM на js.

                  Сделали бы сразу хранилище JSON, просто и красиво.
                    –2
                    Есть браузеры со встроенными преобразовальниками JSON-объектов в строку.

                    Вот эти-то строки в Storage и станут засовывать с наслаждением.
                      0
                      если быть точнее, то это браузеры IE8.0 и FF3.5
                  +3
                  У вас оптимистичные прогнозы — год-полтора.
                  0
                  Вещь, безусловно, хорошая. Меня что-то волнует, однако, в плане вопросов безопасности.
                    +2
                    работает только в районе одного домена, я только что проверил на фф3.5
                      0
                      пока не найдется дырка в безопасности одного из браузеров…
                      0
                      Как будто про безопасность забудут.
                        0
                        Ну пока как-то получается, периодически.
                      0
                      sessionStorage — абсолютно ненужная штука, можно взять любой обьект и сделать с ним те же манипуляции, а вот localStorage — очень хорошая идея, там можно кеш хранить, чтоб не подгружать много раз одно и то же данных =)
                        +1
                        вы не поняли или я недостаточно объяснил, sessionStorage живет пока жива вкладка. вы можете уйти на другие сайты и прийти через сотню страниц назад, а данные будут живы, как-то так. самое главное они будут в какой-то мере транзакционны и унитарны, то есть существовать только в одном состоянии. Изменить их можно будет только из одной вкладки. Это позволит упростить работу для всяких магазинов и прочих ресурсов где требуется проводить транзакции.
                          0
                          Я правильно понял, что window.sessionStorage отличается от обычного массива тем, что если пользователь со страницы site.com/page1 на этой же вкладке перешел на site.com/page2, то window.sessionStorage всё ещё будет доступно в отличие от массива?
                            0
                            storage-данные привязаны к т.н origin (протокол, имя хоста (или IP адрес) и номер порта ). Данные window.sessionStorage доступны на любой странице origin пока вы не закроете вкладку.
                              0
                              В таком понимании действительно нужная вещь.
                                0
                                … и столь же опасная (пошел на другой сайт и он слил эти данные себе). думаю что проблемы безопасности этой технологии ещё дадут о себе знать.
                                  +1
                                  не слил, написано же что данные привязаны к конкретной «связке протокол, имя хоста (или IP адрес) и номер порта». для каждого origin создается свой набор данных.
                          +3
                          раз вы так говорите, значит, вы никогда не сталкивались с проблемой, когда пользователь в двух вкладках делает две разные вещи
                            +1
                            Да, классическая ситуация, типа подбора нескольких конфигурация системных блоков из комплектующих в одном магазине на разных вкладках (если б еще результаты потом сравнить можно было… :)).

                            Сейчас это приходится делать из двух браузеров :) и сравнивать в голове.
                              0
                              есть вещи которые нужны один раз, а приходится грузить их на каждую открытую страничку (явный пример suggestion запросы, которые уже вводились и хранятся в кеше), а делать пользователь может что угодно, это ему никто не запрещает
                                0
                                ясно, вы не понимаете идею, ну ладно
                                  0
                                  в чем же идея?
                                    0
                                    идея: сохранять данные на клиенте даже при переходе между страницами, при этом не перемешивая данные из двух разных табов

                                    пример использования этого приведён чуть выше: «типа подбора нескольких конфигурация системных блоков из комплектующих в одном магазине на разных вкладках»
                                      0
                                      этой идее элементарно подходит sessionStorage, зачем загрязнять глобальную переменную если не хотите чтоб данные перемешались?
                                        +1
                                        хаха, весь этот тред начался с ваших слов:

                                        > sessionStorage — абсолютно ненужная штука

                                        а теперь вы предлагаете его использовать
                                          0
                                          да, я предложил ее заменить просто обьектом, это если конечно Вам не критично что человек ушел с Вашего сайта, и вернется снова именно в этой вкладке
                                            0
                                            как вы сохраните яваскрипт-объект при переходе на другую страницу?
                                              0
                                              например JSON + cookies
                                                0
                                                вам стоит внимательнее читать посты, тогда вы будете знать, как тут не подходят JSON + cookies; )
                                                0
                                                да, вообще надо было этой фразой сначала ответить, треда бы не было
                                0
                                Не тупи, для кэша достаточно выставить нужные expire, чтобы браузеры вообще не пытались делать запросы в течении нужного промежутка.
                                  0
                                  не прошло и пол года… ну ты умный я смотрю… кстати: не тупи, у меня кеш настроен на 200 метров, я за 2 дня трафика более чем на 200 метров насматриваю, все локальные копии убиваются… это частный случай, но все же
                                    0
                                    Чем тут поможет LocalStorage, в некоторых реализациях которого даётся всего 10Мб? Те же лимиты, только в другом месте.
                                      0
                                      те что я не буду забивать его видео и картинками, а лишь нужными (!!!) текстовыми данными
                                        0
                                        Да, с этим будет чуть проще, чем использую сейчас кэширование через js-файлы
                                0
                                угу, сделать реализацию не утвержденного css им вера не позволяет, а не утвержденный html 5 пожалуйста…
                                  0
                                  К сожалению, еще не все браузеры поддерживают DOM Storage, так например поддержка отсутствует у браузеров Chrome и Opera.


                                  где же все это время, пока все интернет-стандарты разивались был ИЕ? :) и тут вдруг добавляют новую фичу (десятая/двадцатая часть от всех нужных интернет-стандартов), и все, ИЕ впереди планеты всей :)

                                  извините, неудержался :)
                                    +5
                                    Иногда маленькие нестандартные фичи (например httpRequest) позволяют сделать качественный рывок вперед, а большие нововведения в стандартах (новые теги в HTML5: footer header aside nav и т.д.) становятся шагом назад.
                                    +2
                                    Лучше бы нормальную поддержку уже существующих и активно используемых технологий ввели вовремя.
                                    © замученный интернет-эксплорером верстальщик
                                      0
                                      Говорят, в старых IE тоже можно было хранить локальные данные не в куках. Делалось это там вроде через HTC+behaviors. Самому мне не приходилось такое делать. НО с HTC я немного потанцевал с бубном. Злая технология :)
                                        +1
                                        да, начиная с IE5 можно было хранить данные через userData
                                          0
                                          Интересно, а метаданные MS будет поддерживать, или эта идея умерал вместе с xHTML2?
                                        0
                                        sessionStorage — полезен явно для всех будет. Только вот печально, что большой процент еще на IE6 и других допотопных браузерах: Писать с поддержкой и туда и туда будет проблематично. Писать только под новые — эгоистично.
                                        Потому полезность будет скорее всего для корпоративных решений, где можно хоть требование предъявить об апгрейде браузеров (если его примут ;)).
                                          +1
                                          Кстати global storage в IE6 без проблем, нужна только JS обёртка которая выберет для него userData вместо нового стандарта.
                                            0
                                            Того же мнения — сейчас же очень много web-приложений для управления оборудованием и тп — я в своем приложении для управления FreeSWITCH поддерживаю только Firefox, исходя из чисто практических соображений — кроссплатформенный, поддерживает свежие стандарты, приложение имеет смысл для максимум 3-10 человек в организации и поставить им FF проблемы нет.
                                              +1
                                              Неэгоистично.
                                              Кстати, не понимаю многих моих знакомых, которые постоянно обновляют до самых свежих версий всё ПО, кроме браузера.
                                              0
                                              >> DOM Storage помогает работать с данными на стороне клиента и приходит на смену механизму cookie,

                                              Вы не могли бы пояснить, каким образом, НЕ _отправляемые_ на сервер данные, могут указать скриптам id сессии пользователя? Совершенно очевидно, что приходит эта технология не «на смену», на «в добавок».

                                              И, честно говоря, не могу пока себе представить, когда сайту могут понадобиться такое количество категорически небезопасных данных. Есть же механизм сессий, да и держать там данных (при суровом желании) можно хоть 100Мб на пользователя.
                                                +1
                                                >> могут указать скриптам id сессии пользователя

                                                не вырывайте из контекста, написано же: «DOM Storage помогает работать с данными на стороне клиента и приходит на смену механизму cookie, используемому для этих целей ранее.» на стороне клиента — это исключает случаи когда надо взаимодействовать с сервером. Cookie никуда не исчезнут, это очевидно, будут использоваться по назначению и дальше.

                                                >> И, честно говоря, не могу пока себе представить

                                                использовать будут те, кто представить сможет, никто вас не заставляет что-то использовать
                                                  –3
                                                  [начало абзаца][начало предложения]
                                                  DOM Storage помогает работать с данными на стороне клиента и приходит на смену механизму cookie, используемому для этих целей ранее.
                                                  [/][/]

                                                  Где ж я из контекста «вырвал»?

                                                  >> использовать будут те, кто представить сможет, никто вас не заставляет что-то использовать

                                                  Спасибо. У Вас есть какие-то предложения по полезному использованию данного механизма (которому так-то уже далеко не первый год жизни), которые Вы не хотите озвучить?
                                                0
                                                «полная поддержка DOM Storage реализована в браузерах Firefox 3.5 (в 3.1 существует частичная поддержка)»
                                                очепятка. Firefox 3.1 = Firefox 3.5
                                                  0
                                                  спасибо
                                                  0
                                                  А в Хроме 3 это не реализовано в какой нибудь мере?
                                                  Интересно бы в сравнении с остальными браузерами увидеть тоже :)
                                                    0
                                                    Плохо, что каждый браузер задает свой размер хранилища (ФФ 5, ИЕ 10), лучше сделать как в флеше, где пользователь сам может ограничивать размер. С соответствующим запросом, когда места не хватает.

                                                    +про Оперу и Хром переживать не стоит, у них несколько раз в год выходят новые версии, потому функционал может появиться уже вот-вот.
                                                    • UFO just landed and posted this here
                                                        +2
                                                        C другой стороны механизм DOM Storage в Internet Explorer предлагает следующие возможности:
                                                        — до 10 мегабайт для хранения данных для каждого сайта (5 Mb в Firefox);
                                                        — …
                                                      0
                                                      Замечание (почти оффтоп) по следам недавнего поста про агрессию Майкрософт (источник — www.ecis.eu/documents/Finalversion_Consumerchoicepaper.pdf):

                                                      As just one example, Microsoft recently announced that Internet Explorer 8 would support a feature called “local storage,” which allows websites to store a limited amount of data on users’ computers so that users can interact with those sites offline, a feature that could help web applications become effective replacements for traditional desktop applications.

                                                      This feature is part of HTML 5, the next version of the HTML standard used for writing web pages. Unfortunately, Microsoft’s implementation is subtly incompatible with the standard, which could lead web developers who test their sites in Internet Explorer 8 to write their sites in a way that will not work in other browsers.

                                                      — Вкратце — МС опять реализовала «совсем слегка нестандартную» стандартную возможность. Подробнее — по источникам из оригинального файла.
                                                        0
                                                        забавный документ, махровая библия ms-ненавистников наверное.
                                                        вы сами то смотрели в чем несовместимость? есть ли она? не врет ли ваш гнилой документ, в котором кроме ссылки на сайт MSDN ничего нет?

                                                        здесь про несовместимость рассказать можете?
                                                          0
                                                          Не надо нападать, никакой я не ненавистник =) А документ да, и правда интересный, хоть и в слишком аггрессивном стиле написан, временами стандартные пиарные приемы просматриваются =)

                                                          По local storage — насколько я понял, отличия здесь лежат: different storage-related event names and asynchronous operations. Кто захочет более подробно изучить тему, может сравнить спецификации стандарта с MSDN (я буду хотеть до тех пор, пока не придется с этим работать).

                                                          Хотел бы закрыть дискуссию — это просто замечание, что, возможно, стоит потестить данный механизм в разных браузерах при его использовании — хотя это и так все нормальные разработчики будут делать =)
                                                            0
                                                            «буду хотеть» читать «не буду хотеть» =)
                                                        0
                                                        В Хром 4 точно работает, только что проверял.

                                                        Only users with full accounts can post comments. Log in, please.