HTML5 - Web SQLデータベース
https://developer.chrome.com/blog/deprecating-web-sql?hl=ja
Web SQLデータベースとは
Web SQLデータベース(Web SQL Database)は、Cookie や Web Storage と同様、アプリケーションデータをクライアント側に保存する仕組みのひとつです。下記の仕様書が公開されています。
Cookie や Web Storage が Key-Value 形式をサポートするのに対し、Web SQL Database では SQLite ベースの SQL によってデータにアクセスします。
ただし、Web SQLデータベースが、特定のソフトウェア(SQLite)の実装に基づくのは中立性に欠けるとの観点から、現在では Web SQL Database の検討は停止しており、代わりに Indexed Database API を利用することが推奨されています。
Web SQL Database は、下記のブラウザでサポートされています。Internet Explorer や Edge ではサポートされていません。
- Google Chrome 8
- Opera 10.6
- Safari 5
サンプル
サンプルはこちら。データベース(testDB)の中にテーブル(test)を作成し、2件のデータを INSERT し、そのデータを SELECT で読み出して表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web SQL Database Sample</title>
<style>
#message { margin:1em; width:500px; border:1px solid gray; padding:1em; }
</style>
<script>
function print(msg) {
document.getElementById("message").innerHTML += msg + "<br>";
}
function test() {
print("FUNCSTION START");
var db = openDatabase("testDB", "", "Test Database", 1000);
db.transaction(
function(tr) {
print("TRANSACTION START");
print("CALLBACK START");
tr.executeSql("DROP TABLE IF EXISTS test", [],
function() { print("DROP TABLE SUCCESS"); },
function() { print("DROP TABLE ERROR"); }
);
tr.executeSql("CREATE TABLE test ( id, name )", [],
function() { print("CREATE TABLE SUCCESS"); },
function() { print("CREATE TABLE ERROR"); }
);
tr.executeSql("INSERT INTO test VALUES ( ?, ? )", [ '1', 'YAMADA' ],
function() { print("INSERT DATA YAMADA SUCCESS"); },
function() { print("INSERT DATA YAMADA ERROR"); }
);
tr.executeSql("INSERT INTO test VALUES ( ?, ? )", [ '2', 'SUZUKI' ],
function() { print("INSERT DATA SUZUKI SUCCESS"); },
function() { print("INSERT DATA SUZUKI ERROR"); }
);
tr.executeSql("SELECT * FROM test", [],
function(rt, rs) {
print("SELECT: SUCCESS");
for (var i = 0; i < rs.rows.length; i++) {
var row = rs.rows.item(i);
print(row.id + " / " + row.name);
}
},
function() { print("SELECT: ERROR"); }
);
print("CALLBACK END");
},
function(err) { print("TRANSACTION ERROR"); },
function( ) { print("TRANSACTION SUCCESS"); }
);
print("FUNCSTION END");
}
</script>
</head>
<body>
<button onclick="test()">TEST</button>
<div id="message"></div>
</body>
</html>
API
openDatabase(name, version, displayName, size, callback)
name にはデータベース名を指定します。version にはバージョンを指定します。省略時は空文字を指定してください。displayName にはブラウザの管理機能で表示される表示名を指定します。size にはデータベースの見積もりサイズ(バイト単位)を指定します。callback は省略可能で、データベースが初めて作成された時に呼び出されるコールバック関数を指定します。
transaction(callback, errorCallback, successCallback)
トランザクションを実行します。callback にはトランザクションを実行するためのコールバック関数、errorCallback にはトランザクションが失敗した場合に呼び出されるコールバック関数、successCallback にはトランザクションが成功した場合に呼び出されるコールバック関数を指定します。
executeSql(sql, params, successCallback, errorCallback)
sql にはSQL文を指定します。params には SQL文中の ? に対応するパラメータを配列で指定します。successCallback には成功時に呼び出されるコールバック関数を、errorCallback には失敗時に呼び出されるコールバック関数を指定します。
ストレージされた内容を確認する方法
- Chrome 63: [F12]→[Application]→[Web SQL]
- Opera 49: [メニュー]→[開発者]→[開発者用ツール]→[Application]→[Web SQL]
- Safari 5.1: [メニュー]→[設定]→[詳細]→[メニューバーに"開発"メニューを表示]。[Ctrl+Alt+I]→[リソース]→[データベース]