Автономная работа с использованием HTML5 Web Storage

Технология Web Storage открывает новые возможности для автономного режима

HTML5, новый стандарт HTML, поддерживает широкий спектр функций и приемов создания страниц. Он позволяет полностью реализовать мультимедийные возможности, CSS3, а также средства рисования на подложке и векторную графику (SVG). HTML5 также поддерживает новые семантические элементы, а также предоставляет легитимные пути создания веб-приложений, использующих кэш, JavaScript, новую версию XMLHttpRequest и технологию Web Storage. В этой статье мы обсуждаем возможности Web Storage, а также объясняем, почему эта технология лучше, чем cookie. Вы сможете узнать об основных концепциях, поддержке в браузерах, а также об объектах Web Storage в HTML5.

Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition

Фото Криса ХэдлокаКрис Хэдлок (Kris Hadlock) занимается разработкой и Web-дизайном по контрактам с 1996 года. Работал над проектами для таких компаний, как SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software и Fire Mountain Gems. Автор книг Ajax for Web Application Developers (издательство Sams) и The ActionScript Migration Guide (издательство New Riders), а также журналист и писатель, публиковавшийся на многочисленных Web-сайтах и в журналах по дизайну, в том числе Peachpit.com, InformIT.com и Practical Web Design. Крис – основатель студии Web-дизайна и разработки программного обеспечения www.studiosedition.com, специализирующейся в области синтеза формы и функциональности.



16.04.2013

Обзор

Cookie-файлы используются с самого начала применения JavaScript, поэтому хранение данных в веб-формате не является каким-то новшеством. Однако Web Storage является куда более мощным инструментом для хранения данных, так как обеспечивает больший уровень безопасности, повышенную скорость и простоту использования. Кроме того, в Web Storage можно хранить большие объемы данных. Ограничения определяются конкретным браузером, но обычно допускается использование от 5 до 10 Мбайт, что более чем достаточно для HTML-приложений. Еще одно преимущество — данные не загружаются с каждым запросом на сервер. Впрочем, существует одно ограничение – нельзя обобществлять веб-хранилища между браузерами: если вы сохранили данные в Safari, они будут недоступны Mozilla Firefox.

В HTML5 имеется два типа объектов Web Storage:

  • Объект sessionStorage сохраняет данные на протяжении одной сессии. Как только пользователь закрывает браузер или страницу, данные уничтожаются;
  • Объект localStorage сохраняет данные без «срока годности». Они остаются в сохранности даже при закрытии страницы или браузера и хранятся настолько долго, насколько позволяет допустимая емкость хранилища в браузере пользователя.

Основные аббревиатуры

  • API: Программный интерфейс приложения
  • CSS: Каскадные страницы стилей
  • HTML: Язык гипертекстовой разметки
  • JSON: Последовательная нотация объектов JavaScript

Оба объекта хранения используют одни и те же методы и свойства. Для единообразия мы будем использовать во всех примерах объект localStorage.

Из этой статьи вы сможете узнать о широких возможностях Web Storage и понять, чем эта техника лучше, чем cookie. Вы познакомитесь с основными положениями хранения данных, с методами HTML5 Web Storage, а также с поддержкой на уровне браузеров.

Вы также можете загрузить исходный код примеров данной статьи.


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

Функции Web Storage поддерживаются во всех новых версиях современных браузеров, включая Firefox, Google Chrome, Safari, Opera и Microsoft® Windows® Internet Explorer® 8+. К сожалению, Internet Explorer 7 и более ранние версии данного браузера не поддерживают Web Storage. В таблице 1 указаны версии браузеров, которые поддерживают HTML5 Web Storage.

Таблица 1. Браузеры c поддержкой HTML5 Web Storage для ПК
ChromeFirefoxSafariOperaInternet Explorer
ChromeFirefoxSafariOperaInternet Explorer
4+4+4+11+8+

Мобильные браузеры, не считая Opera Mini, также обеспечивают поддержку HTML5 Web Storage. В таблице 2 перечислены версии мобильных браузеров с поддержкой HTML5 Web Storage.

Таблица 2. Мобильные браузеры с поддержкой HTML5 Web Storage
iOSAndroidOpera MiniOpera Mobile
iOSAndroidOpera MiniOpera Mobile
5+3+NA11+

Таким образом, поддержка HTML5 Web Storage в браузерах достаточно широка. Однако для более старых браузеров необходимо провести проверку на предмет поддержки технологии, прежде чем использовать ее. Проверка браузера на предмет поддержки Web Storage реализуется просто. Достаточно одного условного оператора с проверкой того, определен ли объект хранения HTML5. Если он определен, вы можете спокойно использовать Web Storage в коде. Если же он не определен, вы должны выбрать альтернативный метод, такой как JavaScript cookie, если вам необходимо хранить данные. В первом листинге приведены примеры простейшего способа проверки поддержки браузером объекта Storage.

Листинг 1. Проверка браузера на предмет поддержки Web Storage
if(typeof(Storage)!== "undefined") {
  // Web storage поддерживается
}
else {
  // Web storage не поддерживается
}

Если браузер не поддерживает Web Storage, вы можете создать собственный объект веб-хранения, используя либо JavaScript cookies, либо одну из существующих библиотек, такую как AmplifyJS. AmplifyJS представляет собой набор компонентов, разработанных для решения общих задач приложений, включая поддержку хранения данных в определенных браузерах, с использованием несложного API-интерфейса. AmplifyJS решает данные задачи при помощи упаковщика amplify.store, который использует существующее хранилище на стороне клиента, поддерживаемое в Internet Explorer 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iOS 2+ и Android 2+. Библиотека также предоставляет необходимые API для использования общих хранилищ нескольких браузеров; таким образом, вам не нужно писать различный код для каждого браузера. Если последний поддерживает HTML5 Web Storage, AmplifyJS будет использовать новейшие технологии хранения. Если же поддержка отсутствует, AmplifyJS будет работать без данных функций. Более подробную информацию об AmplifyJS и API его упаковщика см. в разделе Ресурсы.


Начинаем

Функции HTML5 Web Storage доступны через ряд простых методов. Эти методы поддерживают установку пары ключ/значение, два варианта получения значения по ключу, одновременное удаление всех пар, а также удаление отдельной пары. В таблице 3 приведены методы, доступные для Web Storage в HTML5.

Таблица 3. Методы HTML5 Web Storage
МетодОписание
setItem(key, value)Добавляет пару ключ/значение к объекту Web Storage для дальнейшего использования. Значение может быть представлено любым типом данных: строка, число, массив и т.д.
getItem(key)Возвращает значение по ключу, который был использован для первоначального сохранения.
clear()Удаляет все пары ключ/значение для объекта Web Storage.
removeItem(key)Удаляет отдельную пару ключ/значение из объекта Web Storage по ключу.
key(n)Возвращает значение для ключа[n].

При создании или добавлении пары ключ/значение к объекту Web Storage вы можете использовать для определения значения в паре любой тип данных (строка, число, массив, объект и так далее). Для хранения массива или объекта вам необходимо будет использовать объект JSON, который позволит конвертировать данные в строку при помощи метода JSON.stringify. При извлечении данных вы можете применить JSON.parse, получив в результате массив или объект в его оригинальном виде. Существуют также два различных способа добавления пары ключ/значение к объекту хранения. Первый из них —setItem, описанный в листинге 2.

Листинг 2. Добавление пары ключ/значение к объекту хранения при помощи setItem
localStorage.setItem('myKey', 'myValue');

Второй способ добавления пары ключ/значение к объекту Web Storage — использование прямого указания значение ключа при помощи объекта Web Storage с точкой-разделителем, как это показано в листинге 3.

Листинг 3. Добавление пары ключ/значение в объекту Web Storage напрямую
localStorage.myKey = 'myValue';

Получение сохраненных значений происходит столь же просто. Здесь снова существуют два пути. Первый — использование метода getItem со значением ключа в качестве аргумента. Он возвращает соответствующее значение, если оно существует. Пример вы можете видеть в листинге 4.

Листинг 4. Получение пары ключ/значение из объекта Web Storage при помощи getItem
localStorage.getItem('myKey');

Второй способ получения пары ключ/значение из объекта Web Storage — прямой доступ с точкой-разделителем, как показано в листинге 5. В этом случае возвращается строка 'myValue', которая была задана в одном из предыдущих примеров.

Листинг 5. Получение пары ключ/значение из объекта Web Storage напрямую
localStorage.myKey;

Два способа есть и для удаления сохраненных данных. Вы можете удалить все элементы либо выборочно уничтожить отдельные пары. Для полной очистки объекта Web Storage необходимо использовать метод clear, как в примере из листинга 6.

Листинг 6. Удаление всех пар ключ/значение из объекта Web Storage
localStorage.clear();

Для удаления отдельной пары ключ/значение из объекта Web Storage необходимо использовать метод removeItem. В листинге 7 приведен пример применения removeItem, в котором в качестве аргумента для идентификации удаляемой из объекта хранения пары ключ/значение используется ключ.

Листинг 7. Удаление отдельной пары ключ/значение из объекта Web Storage
localStorage.removeItem('myKey');

В листинге 8 вы можете видеть пример того, как использовать объект JSON для хранения массива в качестве строки с применением метода JSON.stringify. Таким же способом можно сохранять объекты.

Листинг 8. Сохранение массива в качестве строки в HTML5 Web Storage
var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);

Чтобы получить массив в виде строки из Web Storage и конвертировать его обратно для последующей работы с ним при помощи JavaScript используйте метод JSON.parse, как показано в листинге 9.

Листинг 9. Получение строчной версии массива из HTML5 Web Storage и конвертация в исходный формат для использования в JavaScript
var myArray = JSON.parse(localStorage.formData);

В Internet Explorer 8+, Opera 10.5+, Firefox 3.5+, Safari 4+ и Chrome уже имеется встроенная поддержка объекта JSON, необходимая для применения кода из приведенных выше примеров. Если вы работаете с более старым браузером, файл json2.js можно загрузить дополнительно (см. Источники).

Как вы можете видеть, технология Web Storage проста в использовании. Однако прежде чем применять ее, учтите, что на общих ПК серьезной проблемой может быть безопасность. Уровень безопасности Web Storage не большей, чем у cookie. Поэтому не храните на стороне клиента важную информацию, такую как пароли и номера кредитных карт.


Web Storage в действии

Теперь, когда мы познакомились с основами, перейдем к использованию HTML5 Web Storage. Представьте, что на вашем веб-сайте имеется веб-форма, для которой вы хотите обеспечить оффлайновую поддержку. Было бы хорошо, если бы пользователь мог заполнить форму и синхронизировать ее с сервером, когда сайт снова будет доступен. С HTML5 это становится возможным.

Создайте простую веб-форму, которая включает в себя имя и фамилию, адрес e-mail и кнопку подтверждения, как показано в листинге 10.

Листинг 10. Простая веб-форма для сохранения данных при помощи HTML5 Web Storage
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Web Storage</title>
<style type="text/css">
label, 
input {
  display: block;
}
input {
  margin-bottom: 10px;
}
</style>
</head>

<body>

<form action="post.php" method="post" id="web-storage-form">
  <label for="first-name">First name:</label>
  <input type="text" name="first-name" id="first-name">

  <label for="last-name">Last name:</label>
  <input type="text" name="last-name" id="last-name">

  <label for="email-address">Email Address:</label>
  <input type="text" name="email-address" id="email-address">

  <input type="submit" value="Submit">
</form>

</body>
</html>

Форма имеет свой идентификатор (ID) для извлечения POST-запроса и данных формы при помощи JavaScript. Она также содержит CSS для простейшего форматирования элементов формы. Свойство display:block на названиях и строках ввода обеспечивает размещение каждого элемента с новой строки. Свойство margin-bottom создает интервалы между элементами, чтобы строки не располагались слишком тесно.

Когда пользователь отправляет форму, код первым делом предотвращает POST-действие по умолчанию, возвращая web-storage-form ID и перехватывая отправку при помощи jQuery. При отправке POST-запроса с данными формы вы можете перехватить значения заполненных полей и URL, сохранив их в переменных. Вам нужно сериализовать значения полей веб-формы для их отправки в качестве запроса Asynchronous JavaScript + XML (Ajax) или сохранения в Web Storage. Перед отправкой формы узнайте с помощью функции navigator.onLine, подключен ли пользователь в сети в данный момент времени.

Если пользователь в сети, вы можете применить сокращенную Ajax-функцию jQuery.post, чтобы отправить данные и получить ответ от сервера. Эта функция принимает 4 аргумента: url для отправки данных, data— то, что вы отправляете (сериализованные значения элементов формы), функцию callback, которая оповещает об успешном завершении запроса, а также параметр dataType. В данном примере dataType не используется, и система применяет значение по умолчанию.

Если пользователь не в сети, вы можете воспользоваться Web Storage. Во-первых, важно проверить, поддерживает ли браузер Web Storage, используя код из листинга 1. If the browser does support web storage, you can save the form values directly to the localStorage. Если браузер может работать с Web Storage, вы можете сохранить значения полей формы напрямую в объект localStorage, используя произвольный ключ. В нашем примере в используется специальный ключ formValues . Теперь, после сохранения значений в localStorage, вы можете проверить, существуют ли они в тот момент, когда пользователь снова будет в сети. Для этого нужно добавить условие if, проверяющее, присвоено ли значение localStorage.formValues. Если такое значение есть, вы понимаете, что эта форма ранее была сохранена в localStorage, и можете легко отправить данные на сервер при помощи метода jQuery.post, о котором мы уже говорили. После того как данные будут переданы, вам нужно удалить их из Web Storage, чтобы они не передались повторно. В листинге 11 приведен готовый код формы – от отправки Ajax-запроса до сохранения данных в localStorage.

Листинг 11. Сохранение данных формы в localStorage в оффлайновом режиме и передача их на сервер при появлении подключения
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  // Проверяем значения Web Storage из предыдущей сессии оффлайн
session
  if(localStorage.formValues) {
    console.log("localStorage.formValues: "+ localStorage.formValues);
    postForm($("#web-storage-form").attr('action'), localStorage.formValues);
    localStorage.removeItem("formValues");
  }

  $("#web-storage-form").submit(function(event) {
    // Предотвращаем передачу формы
    event.preventDefault(); 

    // Собираем значения
    var formValues = $(this).serialize();
    var url = $(this).attr('action');
    postForm(url, formValues);
  });
 });

function postForm(url, formValues) {
  // Размещаем на сервере или в Web Storage
  if(navigator.onLine) {
    console.log("Online");
    $.post(url, formValues, function(data) {
      console.log("Success: "+ data);
    });
  }
  else {
    console.log("Offline");
    if(typeof(Storage) !== "undefined") {
      console.log("Storage supported");
      localStorage.formValues = formValues;
    }
  }
}
</script>

Чтобы завершить пример, следует добавить файл post.php, который будет служить конечной точкой для POST-запроса, получая запрос в форме и реагируя на него. Этот файл просто получает формы и ответы, выводя массив пар ключ/значение, как в листинге 12. Когда jQuery.post, получает ответ, содержащиеся в нем данные выводятся в консоль.

Листинг 12. Файл PHP, который реагирует на запрос из формы
<?php print_r($_POST); ?>

Конечно, вы можете сделать свой пример значительно более сложным. Например, вы можете использовать базу данных на сервере и регулярно проверять localStorage с определенным интервалом, отслеживая факт возвращения пользовательского компьютера в сеть для передачи данных.


Заключение

HTML5 предоставляет мощный набор функций, которые быстро обретают поддержку в новых версиях всех современных браузеров. Одной из привлекательных возможностей HTML5 является технология Web Storage. Однако ее также нужно использовать с умом. Как и в случае с cookie-файлами, пользователи могут отключить функцию Web Storage. Поэтому всегда нужно предусматривать обходное решение для поддердки пользователей, которые решили не использовать эту новую функцию.


Загрузка

ОписаниеИмяРазмер
Автономная работа с использованием Web Storagehtml5-web-storage.zip2КБ

Ресурсы

Научиться

Получить продукты и технологии

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура
ArticleID=870595
ArticleTitle=Автономная работа с использованием HTML5 Web Storage
publish-date=04162013