[HTML|JS|CSS] HTML5: WebSQL

WebSQL jest jedną z tych funkcjonalności, które pomimo iż kojarzone są ze standardem HTML5, nie znajdą się w tym standardzie. Mimo wszystko wiele przeglądarek wspiera możliwość składowania danych w relacyjnej bazie po stronie klienta. API dostępne z JavaScript pozwala na pisanie zapytań w języku SQL, a dane składowane są w pliku (podobnie jak w SQLite). Jeżeli chodzi o kompatybilność z nowoczesnymi przeglądarkami, to problem pojawia się w przypadku Firefoxa i Explorera, co wyklucza sporą część użytkowników (link).

Aby połączyć się z bazą wykorzystujemy funkcję openDatabase:

var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);

Jeżeli baza nie istnieje to zostaje automatycznie utworzona. Instrukcje SQL wykonywane są w funkcjach zapewniających tranzakcyjność (jeżeli którekolwiek z zapytań się nie powiedzie, cała operacja zostanie cofnięta).

$("#create").click(function(){
 db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE messages (id unique, text)');
 });
});

Tranzakcje można zagnieżdżać, gdyż w callbackach odczytujemy wyniki zapytań.

$("#store").click(function(){
 var value = $("#msg").val();
 db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM "messages"', [], function(tx,results){
   var i = results.rows.length + 1;
   tx.executeSql('INSERT INTO messages (id, text) VALUES (?,?)',
    [i, value]);
  });
 });
 $("#msg").val("");
});

Dane, które chcemy wyświetlić, można filtrować zgodnie ze składnią SQL.

$("#restore2").click(function(){
 var items = $("#items");
 items.html("");
 db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM "messages" WHERE LENGTH(text) > 5', 
   [], function(tx,results){
   var l = results.rows.length;
   for (var i = 0; i < l; i++) {
    var item = results.rows.item(i);
    var li = $("<li>");
    $(li).html(item.id + ", " + item.text);
    items.append(li);
   };
  });
 });
});

Usuwanie z tabeli wykonuje się oczywiście przy użyciu instrukcji DELETE.

$("#removeLast").click(function(){
 var value = $("#msg").val();
 db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM "messages"', [], function(tx,results){
   var i = results.rows.length;
   var sql = 'DELETE FROM "messages" WHERE "id" = ' + i;
   tx.executeSql(sql);
  });
 });
});

Na koniec warto pamiętać, że podobnie jak w przypadku IndexedDB, możemy łatwo oglądać stan naszych tabel w przeglądarce Google Chrome.