Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем трафика. Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.
До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.
Из всей спецификации HTML5, локальные хранилища данных на стороне клиента, вероятно, одна из самых обсуждаемых тем. Есть как положительные, так и отрицательные мнения. Из минусов, самый весомый это нарушение концепции актуальности данных для всех пользователей, т.е. так, как это работает сейчас: пользователь заходит на сайт и видит последнюю версию веб-приложения, ту которую видят и все остальные пользователи. Однако при верном применении локальных хранилищ и своевременного обновления данных, этих проблем можно избежать.
Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:
- Session storage.
- Local storage или Global Storage
- 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, релизы которых не за горами.
Комментарии