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 ではサポートされていません。
サンプルはこちら。データベース(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>
name にはデータベース名を指定します。version にはバージョンを指定します。省略時は空文字を指定してください。displayName にはブラウザの管理機能で表示される表示名を指定します。size にはデータベースの見積もりサイズ(バイト単位)を指定します。callback は省略可能で、データベースが初めて作成された時に呼び出されるコールバック関数を指定します。
トランザクションを実行します。callback にはトランザクションを実行するためのコールバック関数、errorCallback にはトランザクションが失敗した場合に呼び出されるコールバック関数、successCallback にはトランザクションが成功した場合に呼び出されるコールバック関数を指定します。
sql にはSQL文を指定します。params には SQL文中の ? に対応するパラメータを配列で指定します。successCallback には成功時に呼び出されるコールバック関数を、errorCallback には失敗時に呼び出されるコールバック関数を指定します。