HTML5のClient-side database storage（JavaScript Database）を試す

HTML5で導入されるClient-side databaseが使用できるブラウザは以下の通り

（一部ブラウザではHTML5未対応でも GoogleGears をインストールすると使えます。）

http://gears.google.com/

Win + IE6,7,8（Gears使用）
Win + Firefox3.6（Gears使用）
Win + Chrome（Gears使用）
Win + Opera10以降
Mac + Safari 3.1 , Safari 4以降
Mac + Chrome

使用できないのは

Mac + Firefox 3.6（Google Gears 未対応）
Mac + Opera 10.10（Google Gears 未対応）

だけですね。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="http://gear5.googlecode.com/hg/src/javascript/gear5.js"></script>
    <script type="text/javascript" src="jkl-dumper.js"></script> 
	<title>HTML 5 DB</title>
	<meta charset="utf-8" />
</head>
<body>
<script>
var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      else{
        alert('db ok');
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    // ...
  }
// select
db.transaction(
    function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)');
        var id = 12113;
        var name = 'ziddy';
        tx.executeSql("INSERT INTO AddressList VALUES (?, ?)", [id,name] ,
            function(tx, rs) { 
                alert(rs.insertId);
                var dumper = new JKL.Dumper();
                alert( dumper.dump( rs ) );
            }
        );
    } ,
    function(error) {
        alert( 'transaction error : ' + error.message');
      }
);
</script>
</body>
</html>

http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20385468,00.htm

http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html