HTML5 storage

I recently started write pomodoro aplication to practice my skills and try out new technologies.
One of new technology that I tried is HTML5 storage. Storage is actually database but I prefer the word storage.
I show you some examples here. I also
must tell you that Html5 storage works only at Safari. I tried it at Firefox 3.5 and Chrome
but didn’t work even after installation WebKit Nightly.

Fist step is change doctype definition and put manifest at html tag:

1: <!doctype html>
2: <html manifest="PomodoroTimer.manifest">

Ar row 2 you can see defintion of manifest file which is like cache. You can named it
as you like.

Step two is javascript. Because you need somehow dynamicaly add and remove or create records at your hmtl5 storage,
javascript is the right choice. So here is how you can create storage.

if (window.openDatabase){
  storage = openDatabase("pomodoro_timer", "1.0",
   "HTML5 Database for PomodoroTimer", 200000);
  if (!storage)
    alert("Failed to open the database on disk.");
  } else {
    alert("Couldn't open the database.);
}

At first line you can see how to check if window object support starage. At line 2 I create instance
of a storage: storage name, a storage version, a display name, and an estimated size, in bytes, of the data to be stored in the storage/database.
Rest of lines didn’t need an explanation.

So we created a database next step is create some table.

storage.transaction(function(request) {
  request.executeSql("SELECT COUNT(*) FROM tasks", [], function(result) {},
  
  function(request, error) {
    request.executeSql("CREATE TABLE tasks 
      (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT,
         number_of_pomodoros INT, number_of_interuptions INT)", [],
      function(result, error) {           
      });
  });
});

At line one we create an anonymous function for storage transaction. Official definition of transaction method:
“The transaction method takes one to three arguments:
a transaction callback, an error callback, and a success callback. The transaction callback gets passed a SQL transaction object on
which you can use the executeSQL() method.This method takes from one to four arguments: a SQL statement, arguments, a SQL statement callback,
and a SQL statement error callback. The SQL statement callback gets passed the transaction object and a SQL statement result object which gives access to the rows, last inserted ID, et cetera.
“

Last step is insert some data to the table.

storage.transaction(function(request) {
  request.executeSql("INSERT INTO tasks 
     (name, number_of_pomodoros, number_of_interuptions) VALUES (?, ?, ?)", 
    [task.name, task.number_of_pomodoros, task.number_of_interuptions],
     function(result) {}, 
       function(request, error) {
         alert(error.message);
         return;
    });
});

I inserted some data from my object Task. You can see complete code
here.
My sources was this example aplication and w3c documentation.

Have fun.
ps: Select from storage is asynchronous so my pomodoro aplication didn’t use html storage until I resolve this issue.

Leave a Reply