2011/09/17
HTML5のSQL APIを試してみた
chrome が HTML5 の SQL DataBase API を実装していると言うので試してみた。
SQliteなのがまずいのか？
まあそれはそれとして試してみよう。 単純な key/value のテーブルを作って保存/参照をしてみる。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="Persistent.js"></script>
<script>
function save() {
var key = document.form1.key.value;
var val = document.form1.value.value;
Persistent.put(key, val);
}
function load() {
var key = document.form2.key.value;
Persistent.get(key, function(val){
document.form2.value.value = val;
});
}
</script>
</head>
<body>
<button type="button" onclick="Persistent.init()">初期化</button>
<button type="button" onclick="Persistent.dispose()">破棄</button>
<hr/>
<form action="" name="form1">
Key:<input name="key" value="" />
Value:<input name="value" value="" />
<button type="button" onclick="save()">保存</button>
</form>
<hr/>
<form action="" name="form2">
Key:<input name="key" value="" />
Value:<input name="value" value="" readonly="readonly"/>
<button type="button" onclick="load()">読込</button>
</form>
<hr/>
</body>
</html>
function Persistent(){}
Persistent.DB_NAME = "Persistent";
Persistent.DB_VER = "1.0";
Persistent.DB_SIZE = 8192;
Persistent.SQL_CREATE = "CREATE TABLE persistents (key TEXT PRIMARY KEY, value TEXT)";
Persistent.SQL_DROP = "DROP TABLE persistents";
Persistent.SQL_SELECT = "SELECT * FROM persistents WHERE key=?";
Persistent.SQL_DELETE = "DELETE FROM persistents WHERE key=?";
Persistent.SQL_REPLACE= "REPLACE INTO persistents VALUES(?,?)";
Persistent.getDatabase = function(sync) {
if (sync) {
// ワーカー内でしか使えないって ｼｮﾎﾞｰﾝ(´･ω･`)
return openDatabaseSync(
Persistent.DB_NAME, Persistent.DB_VER,
Persistent.DB_NAME,Persistent.DB_SIZE
);
} else {
return openDatabase(
Persistent.DB_NAME, Persistent.DB_VER,
Persistent.DB_NAME,Persistent.DB_SIZE
);
}
}
Persistent.init = function() {
var db = Persistent.getDatabase(false);
db.transaction(function(tx){
tx.executeSql(Persistent.SQL_CREATE, [], Persistent.onNop, Persistent.onError);
});
}
Persistent.dispose = function() {
var db = Persistent.getDatabase(false);
db.transaction(function(tx){
tx.executeSql(Persistent.SQL_DROP, [], Persistent.onNop, Persistent.onError);
});
}
Persistent.put = function(key, value) {
var db = Persistent.getDatabase(false);
db.transaction(function(tx){
tx.executeSql(Persistent.SQL_REPLACE, [key, JSON.stringify(value)],
Persistent.onNop, Persistent.onError);
});
}
Persistent.remove = function(key) {
var db = Persistent.getDatabase(false);
db.transaction(function(tx){
tx.executeSql(Persistent.SQL_DELETE, [key], Persistent.onNop, Persistent.onError);
});
}
Persistent.get = function(key, callback) {
var db = Persistent.getDatabase(false);
db.readTransaction(function(tx){
tx.executeSql(Persistent.SQL_SELECT, [key], function(tx,rs){
if (rs.rows.length >= 1) {
callback(JSON.parse(rs.rows.item(0).value));
} else {
callback(null);
}
}, Persistent.onError);
});
}
Persistent.onNop = function(tx) {
// nop.
}
Persistent.onError = function(tx,err) {
alert(err.mesage);
}
最初にに「初期化」でテーブルを作成してkey/valueを「保存」。
SQLがそのまま使えるだけに残念な感じ。
- SQL Database APIの仕様はこちら
http://www.w3.org/TR/webdatabase/
SQliteなのがまずいのか？
まあそれはそれとして試してみよう。 単純な key/value のテーブルを作って保存/参照をしてみる。
- test.html:
- Persistent.js:
- トランザクションの開始が非同期。
- SQLの結果処理も全て非同期。
- 結果処理を非同期させないopenDatabaseSync()が使えない
以下のサイトによるとワーカーでなら使えるらしい。
http://d.hatena.ne.jp/onozaty/20110505/p1
SQLがそのまま使えるだけに残念な感じ。
この投稿へのコメント
コメント・フォーム
20年勤めた会社がリーマンショックで消滅、紆余曲折を経て現在はフリーランスのSE。
失業をきっかけにこのブログを始める。
