HTML 5: databaseStorage

HTML5 fist, after A List Apart
Image by justinsomnia via Flickr

Nu we toch lekker bezig zijn met HTML 5, wil ik in mijn derde artikel ingaan op de locale databaseStorage mogelijkheden. Deze methode kan complexere data opslaan en verweken aan de gebruikerskant.  Het is in principe een SQLite implementatie binnen de browser van de client. Omdat deze manier van opslag nog in draft is kan er nog veel gebeuren, daarom behandel ik de globale basis zoals hij nu bekend is.

Andere HTML5 artikelen

Heb je ze nog niet gelezen? dan raad ik je aan de twee eerdere artikelen over het canvas element en  local storage te lezen op Netsetters blog.

databaseStorage compatible browsers

Op dit moment kunnen maar een beperkt aantal browsers met de locale database storage overweg. Google’s Chrome (>3), Safari (> 3.2), Opera (>10.5). Bij de release van Firefox 4 in November zal ook de ondersteuning voor locale database toegang meekrijgen. En als we heel veel geluk hebben zou er een kleine kans bestaan dat de functionaliteit later aan versie 9 van Internet Explorer wordt toegevoegd.

Niet compatible, waarom toch gebruiken?

Het is nou eenmaal zo dat ‘maar’ de helft van de browser deze manier van opslag ondersteund, net als met vele andere HTML5 specifieke eigenschappen. Ondanks deze magere ondersteuning kan er nu al winst worden gehaald uit de techniek. Op de Iphone en Android telefoons zijn deze technieken namelijk al geheel beschikbaar gezien deze met Webkit browsers werken (safari en chrome). De tweede reden is dat de nu inspringen de kennis straks vergroot, ook zal het gebruik van de techniek door ontwikkelaars de ondersteuning van HTML5 hoger op de prioriteitenlijst bij de browser-ontwikkelaars komen te staan. want als de consument echt eerlijk mocht kiezen tussen verschillende gratis browsers, dan gebruik je toch een browser die de nieuwe technieken ondersteund? Ook kan de combinatie van oude en nieuwe techniek al een voordeel hebben.

De eerste stap van databaseStorage, een database aanmaken

Met openDatabase() kunnen we een database openen of creëren. Deze JavaScript functie neemt 4 argumenten aan.

  • De database naam
  • De database versie
  • De leesbare naam van de database
  • De grote van de database in bytes (ongeveer)

Om een database te creëren en browsers die het niet kunnen af te vangen kunnen we de volgende code gebruiken:

var db;
try {
    if (window.openDatabase) {
        db = openDatabase("DatabaseTest", "1.0", "HTML5 Database voorbeeld", 200000);
        if (!db)
            alert("Kan database niet openen: verkeerde versie of over het limiet heen");
    } else
        alert("Kan database niet aanmaken, uw browser ondersteund geen databaseStorage");
} catch(err) { }

Query uitvoeren op locale database

Om een query uit te voeren gebruiken we de transaction() methode, deze heeft 1 t/m 3 argumenten, namelijk:

  1. transaction callback
  2. error callback
  3. success callback

De transactie bestaat uit een anonieme functie met executeSQL() methode. Deze heeft tot 4 argumenten, namelijk:

  1. SQL statement
  2. Argumenten
  3. SQL callback
  4. Error Callback

Schematisch gebeurd er dus het volgende:

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Waar displayMyResult en displayMyError de succes en error functies zijn.

Voorbeelden, een tabel aanmaken

db.transaction(function (tx)
        {
             tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {loadNotes();
})
});

Een rij toevoegen

db.transaction(function (tx)
        {
            tx.executeSql("INSERT INTO Adressen (id, naam, adres, woonplaats) VALUES (?, ?, ?, ?)", [id, naam, adres, woonplaats]);
      });

Een rij verwijderen

De meest korte uitvoering, zonder error en succes handlers

 db.transaction(function(tx)
        {
            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);
        });

Een select uitvoeren

Een select maken uit tabelnaam MyTable waar de categorie gelijk is aan selectedCategory

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Meer lezen

Meer kan je vinden op de pagina van het W3C met de offline web applicaties notitie.
Ook een goede aanvullende uitleg is te vinden op de website van creativepark

Related articles by Zemanta
Reblog this post [with Zemanta]

Popularity: 41% [?]

Tags: , , , , , , ,

This entry was posted on Tuesday, May 18th, 2010 at 12:02 am and is filed under data, logic, trends. You can follow any comments to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One comment