HTML5 - храним данные на клиенте: WebStorage/WebSQL/WebNoSQL

Сохранение данных на стороне клиента — давняя проблема веб-разработки. Решается она в настоящее время с помощью механизма HTTP cookie, но любой веб разработчик, стал опрыскивающийся например с проблемой сохранения состояний сложного пользовательского вебер-интерфейса и подобных вещей, знает, сколько проблем связано с его использованием. Прежде всего cookie имеют по умолчанию маленький размер, у них отсутствуют привязка к сеансу работы, они в конце концов просто ненадёжны. HTML5 решает проблему хранения информации на клиенте, причем более чем одним способом.

Во первых новая технология предлагает тапкой простой но мощный механизм как WebStorage. WebStorage — это интерфейс к key/value хранилищу данных на стороне браузера. В настоящий момент его реализуют два объекта. Объект Session Storage сохраняет данные в контексте сеанса работы пользователя (сессии). На практике это обозначает, что данные хранятся до закрытия опкна или вкладки браузера. Работа с sessionStorage осуществляется полпредством следующим образом:

sessionStorage.setItem('name','Vasya');

//......................................
var name = sessionStorage.getItem('name');
sessionStorage.removeItem('name');

Объект Local Storage хранит данные в контексте домена, сохраняя их между сеансами. Методы у него, естественно такие же:

localStorage.setItem('title','Vasya');
//...............................
var name = localStorage.getItem('title');
localStorage.removeItem('title');

кроме того, оба объекта имеют метод clear() для удаления всех пар ключ/значение и свойство lenhgth, хранящие количество сох раненных пар. Ещё один интерфейс — Web Storage Event определяет событие storage, возникающая при изменении состояния хранилища ( setItem() или clear()). Объект Storage Event предоставляет сведущие свойства события: - key — кпплюч, затронутый изменен6ием - oldValue — старое значение ключа - newValue — новое значение ключа - url — адрес страницы на сервере - storageArea - тип хранилища (Session Storage или Local Stotage) Доступ пк этим свойствам можно получить следующим образом:

Впрочем, на key/value хранилище возможности HTML5 по сохранению информации на стороне клиента не заканчиваются. Для хранения структурированных данных предназначена технология WebSQL. Web SQL DB это API дпля доступа к полноценному хSQL-храниплищу данных , основанному на sqlite. Впрочем, последнее обстоятельство — это скорее особенность реаплизации и стандартом не оговаривается, хотя диалект SQL используется именно от туда. (Вообще, использование sqlite в веб браузере практика не новая — firefox и chorome давно используют эту компактную СУБД для хранения настроек и паролей). Работает этот механизм так:

var db = openDatabase('my_db','1.0','test',2*1024*1024, function(){
    alert('объект создан!'
} , function(){
    alert('новая BD!')
} );

Это код создает объект для взаимодействия с базой данных. Если БД с таким именем не существует — она будет создана. Аргументы метода следующие: имя бд версия бд видимое название объем бд (предполагаемый) функция обратного вызова, вызываемая при успешном открытии функция обратного вызова, вызываемая при создании новой БД Даплее можно делать запросы, оборачивая их в транзакцию:

db.transaction( function(t){
    t.executeSql( 'SELECT title FROM documents', [], function(){
    });
}

Вторым аргументом метода executeSql (обязателен у него только первый — строка запроса) является массив аргументов для запроса, встающими на место плейсхолдеров:

db.transaction( function(t){
    t.executeSql( 'INSERT INTO documents ( title, type ) VALUES (?, ?)', ['Order',3]);
}

Поппплучение значений производиться парсингом рекордсета, полученного в результате запроса:

    t.executeSql( 'SELECT title FROM documents WHERE created < ?' , [min_create], function(t, result){
        for(i=o; i < result.rows.lenght; i++){
            doc_name = result.rows.item(i).title;
            alert( doc_name);
        }
    });

Нельзя не упомянуть о ещё одной технологии, тапк или иначе относящейся к данной теме — IndexedDB. Это хранилище объектов или, если хотите, Web ООП СУБД. Посути это те же таблицы, типы данных, транзакции, курсоры, но вместо языка запросов, там применяются методы доступа. Разницу подходов хорошо иллюстрирует пример с сайта одного из разработчиков IndexedDB, Mozilla.org:

WebDatabase:

var kids = [
  { name: "Anna" },
  { name: "Betty" },
  { name: "Christine" }
];
var db = window.openDatabase("CandyDB", "1",
                             "My candy store database",
                             1024);
db.transaction(function(tx) {
  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];
    tx.executeSql("INSERT INTO kids (name) VALUES (:name);", [kid],
                  function(tx, results) {
      document.getElementById("display").textContent =
          "Saved record for " + kid.name +
          " with id " + results.insertId;
    });
  }
});

IndexedDB:

var kids = [
  { name: "Anna" },
  { name: "Betty" },
  { name: "Christine" }
];
 
var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  var objectStore = event.result.objectStore("kids");
  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];
    objectStore.add(kid).onsuccess = function(event) {
      document.getElementById("display").textContent =
        "Saved record for " + kid.name + " with id " + event.result;
    };
  }
};