HTML 5 Websql in Firefox with Websql Polyfill

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="wsp.js"></script>
        <script type="text/javascript">
          var html5rocks = {};
          html5rocks.webdb = {};

          html5rocks.webdb.db = null;

          //opening a database
          html5rocks.webdb.open = function() {
            var dbSize = 5 * 1024 * 1024; // 5MB
            html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
          }

          html5rocks.webdb.onError = function(tx, e) {
            alert("There has been an error: " + e.message);
          }

          html5rocks.webdb.onSuccess = function(tx, r) {
            // re-render the data.
            // loadTodoItems is defined in Step 4a
            console.log('database has been created');
            html5rocks.webdb.getAllTodoItems(loadTodoItems);
          }

          //creating a table
          html5rocks.webdb.createTable = function() {
            var db = html5rocks.webdb.db;
            db.transaction(function(tx) {
              tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                    "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", [],
                    function(tx, r){
                      console.log('Create table success');
                    },
                    function(tx, e){
                      console.log('Create table error '+ e.message);
                    });
            });
          }

          //adding data to a table
          html5rocks.webdb.addTodo = function(todoText) {
          var db = html5rocks.webdb.db;
          db.transaction(function(tx){
            var addedOn = new Date();
            tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
            [todoText, addedOn],
                    function(tx, r){
                      console.log('Insert table success');
                    },
                    function(tx, e){
                      console.log('Insert table error '+ e.message);
                    });
          });
        }

        //selecting data from the table
        html5rocks.webdb.getAllTodoItems = function(renderFunc) {
          var db = html5rocks.webdb.db;
          db.transaction(function(tx) {
            tx.executeSql("SELECT * FROM todo", [], renderFunc,
            html5rocks.webdb.onError);
          });
        }

        //rendering data from table
        function loadTodoItems(tx, rs) {
          console.log('data select returned okay');
          var rowOutput = "";
          var todoItems = document.getElementById("todoItems");
          for (var i=0; i < rs.rows.length; i++) {
            rowOutput += renderTodo(rs.rows.item(i));
          }

          todoItems.innerHTML = rowOutput;
        }

        function renderTodo(row) {
          return "<li>" + row.todo +
            " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" +
            row.ID +");\'>Delete</a>]</li>";
        }

        //deleting data from a table
        html5rocks.webdb.deleteTodo = function(id) {
          var db = html5rocks.webdb.db;
          db.transaction(function(tx){
            tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
                    function(tx, r){
                      console.log('delete table success');
                    },
                    function(tx, e){
                      console.log('delete table error '+ e.message);
                    });
            });
        }

        //when the page loads open data and do crud
        function init() {
          html5rocks.webdb.open();
          html5rocks.webdb.createTable();
          html5rocks.webdb.getAllTodoItems(loadTodoItems);
        }

        function addTodo() {
          var todo = document.getElementById("todo");
          html5rocks.webdb.addTodo(todo.value);
          todo.value = "";
        }

        </script>
    </head>
    <body onload="init();">
    <ul id="todoItems">
    </ul>
        <div>TODO write content</div>

        <form type="post" onsubmit="addTodo(); return false;">
          <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
          <input type="submit" value="Add Todo Item"/>
        </form>
    </body>
</html>