Pull to refresh

Альтернатива cookies посредством Java Script

Reading time 5 min
Views 14K
Поиск по хабру похожей статьи не дал, потому рискну поделится с теми кто еще не в курсе
Многие из вас сталкивались с проблемой хранения данных на клиенте. Первым делом в голову приходит cookies но ограничение хранения данных в размере не более 4kb не всех радует, сегодня если позволите я вам расскажу как посредством Java Script хранить около 100kb на клиенте.

В спецификации HTML5 описано несколько приемов хранения данных на клиенте не используя cookies. Рассмотрим некоторые из них либо их альтернативы по подробнее:

The sessionStorage attribute


Этот метод поддерживается Firefox начиная со второй версии. Это глобальный обьект, который хранится в текущей сессии документа и хранится пока документ открыт, перегружается или восстанавливается, но открытие нового окна или вкладки с тем же адресом породит новую сессию.
Пример использования:
sessionStorage.text = «Хабр помнит о тебе, %username%»;
alert(«НЛО: „+sessionStorage.text);
* This source code was highlighted with Source Code Highlighter.


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

globalStorage


В связи с тем что HTML5 пока еще развивается в Firefox присутствует глобальный обьект globalStorage, который позволяет хранить данные в браузере в течении долгого промежутка времени не привязываясь к сессии, что позволяет пользоваться и манипулировать сохраненными данными при открытия нового окна, вкладки, закрытия\открытия браузера. Привязка хранилища такого рода осуществляться по домену.
Пример использования:
// Инициализируем хранилище
storage = globalStorage[“habrahabr.ru»];
// Записываем значение
storage['hello'] = 'Привет хабрахабр!';
// Выводим значение
alert(storage['hello']);
// При необходимости удаляем
delete storage['hello'];

* This source code was highlighted with Source Code Highlighter.


Такой подход дает нам возможность сохранить до 5 мегабайт информации на клиенте в определенном домене, и использовать наше хранилище в пределах домена и его субдоменов. Тоесть оно будет действовать как на habrahabr.ru, antyrat.habrahabr.ru и т.д.

userData


Но все что было описано выше действует только на Firefox (Gecko) браузеры, как же быть с IE?
Мелкомягкие пошли другим путем, но не ограничили разработчиков в прекрасной возможности отказатса от cookies.
Хранение данных на клиенте в ослике осуществляется работой с behavior. Спецификацию по работе с этим можно прочитать тут, а мы пока рассмотрим пример:
<!-- Во первых нам понадобится элемент в каком мы будем хранить данные -->
<span id=«customStorage»></span>
<!-- Далее нам нужно инициализировать наше хранилище -->
<script language=«javascript» type=«text/javascript»
 if(document.getElementById('customStorage')) {
  storage = document.getElementById('customStorage');
  storage.addBehavior("#default#userData");
  storage.load(«habr»);
  // Инициализация прошла и теперь мы уже можем работать с нашим хранилищем
  storage.setAttribute(«hello», «Хабрапривет!»); // Устанавливаем нашу переменную
  storage.save(«habr»); // И сохраняем ее
  // А теперь можно и вывести результат
  alert(storage.getAttribute(«hello»));
 }
</script>
* This source code was highlighted with Source Code Highlighter.

Также нашему хранилищу как и в cookies можно задать время жизни, но об этом при необходимости вы сами сможете прочитать как это сделать.

Client-side Database Storage


Разработчики WebKit (Safari) вплотную приблизились к рекомендациям HTML5 и дали возможность создавать на клиенте базу данных.
Перейдем сразу к примеру:
// Открываем нашу БД
db = openDatabase(«habrahabr», «1.0»);
// Создаем таблицу если она еще не существует
db.transaction(function(tx) {
 tx.executeSql(
   «CREATE TABLE IF NOT EXISTS habr (id TEXT, hello TEXT, unique(id))», // Запрос к БД
   [], // Сюда передаем при нужде переменные в наш запрос, они заменяют в нашем запросе знаки "?" по порядку
   function(tx, result) { }, // обработка в случае удачи
   function(tx, error) { alert(«НЛО: „+error.message); } // обработка в случае неудачи
 )
});
// Записываем значение
db.transaction(function(tx) {
  tx.executesql(“insert into habr (id, hello) values ('1', 'Хабрапривет!')», [],
    function(result) { },
    function(tx, error) { alert(«НЛО: „+error.message); });
});
// Вввод результата
db.transaction(function(tx) {
  id = 1;
   tx.executesql(“select hello from habr where id=?», [id], function(result) {
      // Выводим результат
      alert(result.rows.item(0).hello);
   }, function(tx, error) { alert(«НЛО: „+error.message); });
});
* This source code was highlighted with Source Code Highlighter.


Недостатком такого подхода являеться то что с БД можна работать только в пределах домена. Поддомены не поддерживаються.
Много информации об етом не нашол, копал вот етот пример.

Local SharedObject


Пользователям оперы повезло меньше всех, ни один из вышеперечисленных примеров опера не поддерживает, поэтому нужно прибегнуть к хитростям.
Начиная с версии Flash Player 6.0.40.0 флеш поддерживает Local SharedObject, вот его то мы использовать и будем.
Как это выглядит со стороны ActionScript:
//Создание Local SharedObject
theLocalSharedObject = sharedobject.getLocal(“habra»);
//Сохранение значения
theLocalSharedObject.data.hello = «Хабрапривет»;
theLocalSharedObject.flush()
//Получение значения
hello = theLocalSharedObject.data.hello;
* This source code was highlighted with Source Code Highlighter.

Во флеше я сильно не силен, да и под рукой сейчас нету средств чтоб описать этот метод по подробней, поэтому расскажу саму суть, все что требуется так это создать мост взаимодействия Flash <=> JS, для взаимодействия между собой чтоб легко было передавать параметры во флеш и принимать их с его хранилища. Этот метод действителен для всего домена. Ограничения по размеру зависит от установок пользователя, по умолчанию это 100 килобайт.

Silverlight Isolated Storage


Если у пользователя установлен Silverlight тогда можно воспользоваться обьектом Isolated Storage спецификацию по нему можно найти тут.
Опять таки сейчас нету возможности более подробно описывать этот метод.



В итоге мы получили средство хранения информации на клиенте в размере от 100kb. Использовать это можно в любых целях.
На данный момент я пишу кросс браузерный скрипт хранения данных на клиенте, какой бы посредством флеша смог бы синхронизировать хранилище в браузерах. А запись чтение без наличия флеша или когда доступ запрещен использовать встроенными функциями браузеров. Если статья покажется интересной то я выложу эту либу.

PS: Прошу сильно не пинать за пост, так как это мой первый пост на хабре.
PPS: А у вас тоже эта вредная привычка выделять текст перед прочтением?

UPD: Пользователь donquijote привел ссылку на скрипт который пытается реализовать описанный механизм, единственный недостаток как по моему, это то, что при открытии другого браузера данные переносятся только ели и там и там срабатывало хранилище через flash. В своей статье я забыл учесть еще 2 очень мощьных механизма хранения данных на клиенте, это Adobe AIR и Google Gears, реализация последнего есть в приведенном скрипте, спасибо shamaniac за подсказку.

Tags:
Hubs:
+1
Comments 43
Comments Comments 43

Articles