Client-side database storage TEST
03/29/2008 04:25:23Web
技術系ネタ。
HTML5で搭載されるらしいクライアントサイドに作成できるSQLストレージが、最近でたばかりのSafari3.1で利用できるようになったらしいので、早速テストしてみました。
(簡単にいうとユーザーの実行環境にデータを保存できるシステム)
・Client-side database storage TEST
(Safari3.1のみ動作します。IEとかFirefoxとかOperaとかはまだサポートされていません。)
ソース解説。
//データベースを作成する
var db = openDatabase(‘safariTestDB’,’1.0′);
openDatabase()でデータベースを(開く・作成)します。データベースが無かったら勝手に作成します。
第一引数はDB名、第二引数はバージョンらしいです。この辺りの所はまだよくわからない。
//トランザクション開始
db.transaction(function(trsn){//テーブル作成
trsn.executeSql(‘CREATE TABLE nameList (id INTEGER PRIMARY KEY,name TEXT)’);//インサート処置
trsn.executeSql(‘INSERT INTO nameList (name) VALUES(“ゴマせんべい”)’);
trsn.executeSql(‘INSERT INTO nameList (name) VALUES(“塩せんべい”)’);
trsn.executeSql(‘INSERT INTO nameList (name) VALUES(“醤油せんべい”)’);
trsn.executeSql(‘INSERT INTO nameList (name) VALUES(“ノリせんべい”)’);
});
トランザクション処理を開始して、クエリを実行しています。
nameListというテーブルを作成して「せんべい」の名前を挿入しています。
トランザクションはデータベース.transaction()で実行します。
処理の説明は面倒なのでしませんが、たぶんこの記事を読む人ならソースを見れば判るんでないだろうか。
var name = ”;
//作成したデータを表示
db.transaction(function(trsn){
trsn.executeSql(‘SELECT * FROM nameList’, [], function(trsn, result){
var i = 0;
while(i < result.rows.length){
//結果を取り出し
var row = result.rows.item(i);name += row['name']+"/";
i++;
}
document.getElementById('SafariTest').innerHTML = name;
});
});
挿入したデータをテーブルから読み出して最後に表示させます。
今回はエラー処理とか、気にせずやってるので実際使う場合は色々面倒なところがあるんですけども、実装する場合はjQuery用のプラグインとかあったら便利そうだなーと思った。
というわけで、せんべいくおう。
※参考: HTML5
RSS2.0
