Из таких 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, релизы которых не за горами. 

Рассказать друзьям
author.jpg

Платная консультация по вопросам 2500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий


Комментарии   

Константин
+1 # Константин 05.07.2011 17:35
поправьте в стилях для div class="post" onefile.php:59 - ширину. Из за неё контент выпадает из контейнера
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Александр
0 # Александр 12.05.2012 06:03
Хорошая статья. Здесь немного подробней описана работа локального хранилища. http://plutov.by/post/html5_local_storage
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Shanon
0 # Shanon 11.07.2020 14:21
As alway, very good blog! I read your blog on a regular basis
and you are obѵiously alwayѕ releasing some very niⅽe stuff.
I'll Ƅe sure to shaгe this ᧐n mmy FB paagе andd my followers sh᧐uld like thіs also.

Keep up the good work!

Feel free to visіt mу hojepage ... Shanon
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору