Введение в HTML5 DOMStorage API с примером

Помимо указания разметки, HTML5 определяет интерфейсы прикладного программирования (API) для сценариев. Существующие интерфейсы объектной модели документов (DOM) расширены, а функции де-факто задокументированы.

Что такое DOM Storage?

DOM Storage — это способ постоянного хранения надежных и значимых объемов данных на стороне клиента. Это черновик W3C, который описывает, как именно следует сохранять информацию на стороне клиента. Первоначально он был частью спецификации HTML 5, но затем был взят как независимый. Веб-хранилище, или несколько запутанное популярное имя DOM Storage, — отличный способ сохранить информацию для текущего сеанса и окна или для возвращающихся пользователей.

Хранилище DOM предоставляет механизм для безопасного хранения данных в виде пар ключ / значение и последующего извлечения для использования. Основная цель этой функции — предоставить комплексные средства, с помощью которых можно создавать интерактивные приложения (включая расширенные возможности, такие как возможность работать в автономном режиме в течение продолжительных периодов времени).

DOM Storage предоставляет мощный способ хранения и извлечения данных на стороне клиента с помощью JavaScript-подобных API-интерфейсов, которые просты в использовании.

Область применения DOM Storage

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

Механизм хранения DOMStorage доступен из глобальных переменных объекта окна. Ниже приведены доступные объекты, которые обеспечивают различную область хранения данных.

sessionStorage

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

Пример: сохраните строковое значение «Hello, World» и отобразите его при обновлении браузера.

//Store the data in sessionStorage object
 sessionStorage.hello = “Hello, World!”; 

 //Retrieve the data from sessionStorage object on
 //browser refresh and display it
 window.onload = function() {
     if(sessionStorage.hello)
         alert(sessionStorage.hello);
 }

LocalStorage

Объект localStorage полезен, когда требуется сохранить данные, которые охватывают несколько окон и сохраняются после текущего сеанса. LocalStorage предоставляет постоянную область хранения для доменов.

Например: данные, хранящиеся в localStorage [‘viralpatel.net’], могут быть получены любым скриптом, размещенным на уровне Viralpatel.net. Аналогично, данные, хранящиеся в localStorage [‘net’], могут быть доступны с помощью сценариев на любых веб-сайтах уровня .net TLD. Данные, хранящиеся как localStorage [»], доступны для всех страниц на всех сайтах.

Пример: следующий скрипт сохранит значение hello на уровне Viralpatel.net. Таким образом, все сценарии, размещенные на Viralpatel.net и на уровне его поддоменов, могут как читать, так и записывать значения.

 //Store the data in localStorage object
 localStorage['viralpatel.net'].hello = "Hello, World!";

DOM Storage API

DOM Storage объекты sessionStorage и localStorage предоставляют определенные полезные свойства и методы API. Ниже приведен список таких API.

• Метод getItem () — получает значение элемента, переданного в качестве ключа к методу
• Свойство length — возвращает длину количества элементов.
• Свойство ОстальноеSpace — Возвращает оставшееся пространство в байтах для объекта хранения.
• Метод clear () — удаляет все пары ключ / значение из хранилища DOM
• Метод key () — получает ключ по указанному индексу
• Метод removeItem () — удаление пары ключ / значение из хранилища DOM
• Метод setItem () — устанавливает пару ключ / значение

Сравнение HTTP-файлов cookie с DOM Storage

Ниже приведено несколько сравнений HTTP-файлов cookie и DOM Storage.

• Файлы cookie HTTP могут хранить ограниченный объем пользовательских данных (например, 4 КБ), тогда как современный браузер, такой как IE 8, поддерживает до 10 МБ данных, хранящихся в DOM Storage.
• Файлы cookie ограничивают доступ к данным определенным доменным именем или URL-путем, где DOM Storage может ограничить доступ к определенному доменному имени, домену TLD (например, .org) или для данного сеанса пользователя.
• Ключи, хранящиеся в файлах cookie HTTP, можно получить с помощью API. Можно перебирать все пары ключ / значение в HTTP-куки. В то время как в DOM Storage невозможно перебирать ключи. Данные не могут быть получены, если ключ не известен.
• Данные, хранящиеся в виде файлов cookie HTTP, могут быть получены на сервере, поскольку эти данные передаются по запросу Принимая во внимание, что DOMStorage — это больше данных клиента, и его невозможно получить непосредственно на стороне сервера.

Поддержка веб-браузера

В настоящее время современные браузеры, такие как Firefox 3.5, Internet Explorer 8 и Safari 4, полностью поддерживают спецификацию DOM Storage. Ниже приведен список браузеров и их соответствующих значений, таких как Размер хранилища, Поддержка, Перезапуск браузера Survive.

Демо-приложение

Давайте продемонстрируем использование API DOMStorage и создадим демонстрационное приложение.

Требования к заявке

Приложение имеет форму под названием Клиентская форма с некоторыми элементами ввода. Требуется сохранить значения формы в случае случайного обновления страницы и восстановить значения обратно.

Пользовательский интерфейс

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

Исходный код

Ниже приведен исходный код HTML веб-страницы, содержащей форму клиента:

<HTML>
  <HEAD>
    <TITLE>DOMStorage - Sample Application
    </TITLE>
  </HEAD>
  <BODY>
    <H2>Client Form
    </H2>
    <br/>
    <form name="clientForm" id="clientForm">
      <table>
        <tr>
          <td>First Name
          </td>
          <td>
            <input type="text" name="firstname"/>
          </td>
        </tr>
        <tr>
          <td>Last Name
          </td>
          <td>
            <input type="text" name="lastname"/>
          </td>
        </tr>
        <tr>
          <td>Date of Birth
          </td>
          <td>
            <input type="text" name="dob"/>
          </td>
        </tr>
        <tr>
          <td>Gender
          </td>
          <td>
            <input name="gender" type="radio" value="M">Male
          </input>
          <input name="gender" type="radio" value="F">Female
        </input>
          </td>
        </tr>
        <tr>
          <td>Designation
          </td>
          <td>
            <select name="designation">
              <option value="0">Software Engineer
              </option>
              <option value="1">Sr. Software Engineer
              </option>
              <option value="2">Technical Architect
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <br/>
            <input name="submit" type="button" value="Submit"/>
            <input name="reset" type="reset" value="Reset"/>
          </td>
        </tr>
      </table>
    </form>

<script type="text/javascript" src="domstorage-persist.js"></script>

  </BODY>
</HTML>

Ниже приведен код JavaScript (содержимое domstorage-persist.js)

/**
 * Filename: domstorage-persist.js
 * Author: viralpatel.net
 * Description: HTML code independent form persistent
 * Usage:  persist(<form object>);
 */

function persist(form) {

/*
   * In case of page refresh,
   * store the values of form to DOMStorage
   */
    window.onbeforeunload = function () {
        var str = serialize(form);

        try {
            sessionStorage[form.name] = str;
        } catch (e) {}
    }

/*
   * If the form was refreshed and old values are available,
   * restore the old values in form
   */
    window.onload = function () {
        try {
            if (sessionStorage[form.name]) {
                var obj = eval("(" + sessionStorage[form.name] + ")");
                for (var i = 0; i < obj.elements.length - 1; i++) {
                    var elementName = obj.elements[i].name;
                    document.forms[obj.formName].elements[obj.elements[i].name].value = obj.elements[i].value;
                }

            }
        } catch (e) {}
    }
}

/*
 * Convert form elements into JSON String
 */

function serialize(form) {
    var serialized = '{ "formName":"' + form.name + '", "elements": [';
    for (var i = 0; i < form.elements.length; i++) {

        serialized += '{';
        serialized += '"name":"' + form[i].name + '",';
        serialized += '"value":"' + form[i].value + '"';
        serialized += '},';
    }
    serialized += '{"name":0, "value":0}';
    serialized += '] }';
    return serialized;
}

/*
 * Make the Client Form persistable.
 * i.e. Persist its values in case of page refresh
 */
persist(document.clientForm);

Рекомендации

• W3C: черновой стандарт веб-хранилища ( http://dev.w3.org/html5/webstorage/ )
• Центр разработчиков Mozilla: DOM Storage ( https://developer.mozilla.org/En/DOM:Storage#Description )
• MSDN: Введение в хранилище DOM ( http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx#_dom )

Дальнейшее чтение

Данная статья посвящена новейшему механизму DOMStorage, стандартизированному консорциумом World Wide Web (W3C) в составе HTML5. Существует несколько других подобных технологий, которые можно использовать для хранения автономных данных в браузере. Пользователям, которые заинтересованы в хранении на основе браузера, настоятельно рекомендуется прочитать о следующих технологиях.

• HTTP Cookies ( http://www.microsoft.com/info/cookies.mspx )
• DOMCached — Memcached-подобная система кэширования для JavaScript с использованием хранилища DOM ( http://www.domcached.com )
• Google Gears ( http://gears.google.com/ )
• Adobe Flash — локальные общие объекты ( http://www.adobe.com/products/flashplayer/articles/lso/ )

От: http://viralpatel.net/blogs/2010/10/introduction-html5-domstorage-api-example.html