mabase.html

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>MaBase</title>
  <script type="text/javascript" charset="utf-8">
    var db;
    var maxID = 0;
    
    try {
      if( window.openDatabase ) {
        db = openDatabase("MaBase", "1.0", "Client-Side Database Storage - Example 1", 200000);
        if( !db ) {
          alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
        }     
      } else {
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
      }
    } catch( err ) { 
      alert( "Something was wrong : "+err.description );
    }
    
    function checkOrCreateDB() {
      db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM MaTable", [], function(result) {
          // Do something
          displayDatas();
        }, function(tx, error) {
          tx.executeSql("CREATE TABLE MaTable (id REAL UNIQUE, key TEXT, value TEXT)", [], function(result) { 
            // Do something
            displayDatas();
          });
        });
      });
    }
    
    function displayDatas() {
      table = "<table border><tr><th>Key</th><th>Value</th><th></th></tr>"
      db.transaction(function(tx) {
        tx.executeSql("SELECT id, key, value FROM MaTable", [], function(tx, result) {
          if( result.rows.length == 0 ) {
            table = "<i>Pas de données dans la table</i>"
          } else {
            for( var i = 0; i < result.rows.length; ++i ) {
              var row = result.rows.item(i);
              if( row.id > maxID ) {
                maxID = row.id;
              }
              table = table + "<tr><td>"+row.key+"</td><td>"+row.value+"</td><td><a href='javascript:deleteData("+row.id+")'>Del</a></tr>"
            }
            table = table + "</table>"
          }
          document.getElementById("datas").innerHTML = table;
        }, function(tx, error) {
          document.getElementById("datas").innerHTML = '<b>Failed to retrieve datas from database - ' + error.message + '</b>';
        })
      })
    }
    
    function deleteData(id) {
      db.transaction(function(tx) {
        tx.executeSql("DELETE FROM MaTable WHERE id = ?", [id]);
      });

      displayDatas();
    }
    
    function addNewPair() {
      key = document.getElementById("key_value").key.value;
      value = document.getElementById("key_value").value.value;
      id = ++maxID;
      
      db.transaction(function (tx) {
        tx.executeSql("INSERT INTO MaTable (id, key, value) VALUES (?, ?, ?)", [id, key, value]);
      });

      displayDatas();
      
      return( false );
    }
    
    addEventListener('load', checkOrCreateDB, false);
  </script>
</head>
<body>
  <h1>Client-Side Database Storage - 001</h1>
  
  <form id="key_value">
    Key : <input type="text" name="key"><br />
    Value : <input type="text" name="value"><br />
    <input type="button" value="Ajouter" onclick="addNewPair()">
  </form>
  
  <div id="datas">
  </div>
  
</body>
</html>