Из таких web приложений, как Google Wave, Gmail и т.п.  мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем трафика. Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.  

До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB  или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что  в стандарте должны были появится средства для более практичного хранения данных в браузере. 

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

Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

  1. Session storage.
  2. Local storage или Global Storage
  3. Database storage

 

Давайте подробнее рассмотрим каждую из них: 

1. Session Storage - сессионное хранилище

  Сессионное хранилище более удобно, чем  cookie. С различными реализациями макс. лимит может быть  порядка нескольких Мбит. В отличии от cookie сессионные данные не отправляются при каждом запросе.
 Преимущества: при запросе полезная нагрузка минимальна.
 Приведем пример сессионного хранилища:

sessionStorage.setItem('userName', 'taranfx'); // определяем сессионную переменную
alert("Вас зовут: " + sessionStorage.getItem('userName'));// проверка доступа
alert("Привет " + sessionStorage.userName); // другой метод доступа к сессионной переменной
sessionStorage.removeItem('userName'); // в конце удаляем переменную


 2. Local Storage - локальное хранилище
 

LocalStorage JavaScript объект функционально идентичен sessionStorage объекту. Они отличаются только продолжительностью жизни и областью видимости. Область видимости: данные  в localStorage доступны через все окна браузера в то время, как sessionStorage данные ограничивается окном в котором были созданы.
 Глобальное хранилище памяти задается браузером, веб-сайты могут использовать его для хранения постоянных данных, которые не должны быть отправлены на сервер. Данные доступны по JavaScript  и  Flash. Это может быть очень удобно для Flash-игр.

globalStorage[''].foo = 'bar'; // foo будет доступен на любом веб-сайте
globalStorage['ru'].foo1 = 'bar1'; // foo1 будут доступны на сайтах '.ru'
globalStorage['xdan.ru'].foo2 = 'bar2'; // foo2 будет доступен только на xdan.ru


 При локальном хранении данных, спецификация была переписана в более безопасную сторону. Т.е. теперь данные автоматически привязываются к домену.
 Продолжительность действия: при хранении в Local Storage данные сохраняются даже после закрытия вкладки/окна/браузера. 

Вот как это можно сделать: 

localStorage.setItem('userName', 'taranfx'); // определяем переменную в localStorage 
alert("Вас зовут: " + localStorage.getItem('userName')); // доступ к ней
alert("Привет " + localStorage.userName); // доступ к ней по другому
localStorage.removeItem('userName'); // в конце удаляем ее


 3. Database Storage - хранение в базе данных

До сих пор мы обсуждали хранилища ограниченные парами ключ-значение. Но когда вы имеете дело с большими объемами данных, лучше базы данных еще ничего не придумали. Браузеры использует SQLite базы, которая работает без дополнительных процессов и серверов. Лишь с небольшими ограничениями, к примеру отсутствие внешнего ключа. 

Но в награду вы получаете полноценную SQL базу данных. И работа с ней ведется на SQL.

Вот пример кода для доступа к локальной базе данных: 

var db = openDatabase("Database_Name", "Database_Version");
database.executeSql("SELECT * FROM xdan", function(result1) {
   // что-то делаем с результатом запроса
   database.executeSql("DROP TABLE xdan", function(result2) {
     // чистим бд
     alert("Мой второй запрос к базе данных закончил работу !");
   });
 });

Демо примеров вы можете увидеть здесь (вам потребуется webkit браузер) Пока спецификация HTML5 достаточно сырая, и содержит большое количество уязвим остей. Я думаю, ситуация значительно изменится с выходом FireFox4 и IE9, релизы которых не за горами. 

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Константин
# Константин 05.07.2011 17:35
поправьте в стилях для div class="post" onefile.php:59 - ширину. Из за неё контент выпадает из контейнера
Александр
# Александр 12.05.2012 06:03
Хорошая статья. Здесь немного подробней описана работа локального хранилища. http://plutov.by/post/html5_local_storage