データベースの利用方法
現在 (2023/12)、Web SQLはAndroidのWebViewで利用可能ですが、将来的にサポートされなくなる可能性があります。 localStorage、 sessionStorage、IndexedDB などの代替ストレージ技術をご検討ください。
Web SQL Database
接続を行う前に、Database オブジェクトを新規作成します。ここでは、 window.openDatabase を使用して、SQLite データベースを新規作成します。
var db = window.openDatabase(database_name, database_version, database_displayname, database_size);データベースの作成 ( SQLite )
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.openDatabase("database", "1.0", "testdatabase", 1000000);
}
</script>
</head>
<body>
<pre>Web SQL Database</pre>
</body>
</html>openDatabase 関数の引数
指定する引数
説明
設定値
database_name
データベース名
文字列
database_version
データベースのバージョン
文字列
database_displayname
データベースの表示名
文字列
database_size
データベースのサイズ ( バイト単位 ）
整数
Database オブジェクトのメソッド
Function
説明
transaction
データベースのトランザクションの処理
changeVersion
データベースのバージョンの確認とスキーマのアップデート ( 必要な場合 )
SQL 文を実行するメソッドは、SQLTransaction オブジェクトの executesql です。SQLTransaction オブジェクトを取得するには、Database オブジェクトの transaction を実行します。SQLTransaction オブジェクトの executeSql の実行時に、コールバック関数が実行され、 SQLResultSet オブジェクトがコールバック関数に渡されます。
SQLResultSet オブジェクトのプロパティ
Function
説明
insertId
INSERT 文の成功時に、行番号を返します。
rowsAffected
SQL の実行により、影響を受けた行を返します。
rows
ResultSetRowList オブジェクトを返します。SQL 実行時の処理結果です。
SQL 文の実行 ( SQLite )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="components/loader.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.alert("Create a database and display the content");
}
function executeQuery(tx) {
tx.executeSql('DROP TABLE IF EXISTS TestTable');
tx.executeSql('CREATE TABLE IF NOT EXISTS TestTable (id unique, data)');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (1, "あいうえお")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (2, "かきくけこ")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (3, "さしすせそ")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (4, "たちつてと")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (5, "なにぬねの")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (6, "はひふへほ")');
tx.executeSql('INSERT INTO TestTable (id, data) VALUES (7, "まみむめも")');
}
function queryDB(tx) {
tx.executeSql('SELECT * FROM TestTable', [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
var len = results.rows.length;
window.alert("There are " + len + " rows of records in the database.");
for (var i=0; i<len; i++){
document.writeln("row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data+"<br/>");
}
}
//Callback function when the transaction is failed.
function errorCB(err) {
console.log("Error occured while executing SQL: "+err.code);
}
// Callback function when the transaction is success.
function successCB() {
var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
db.transaction(queryDB, errorCB);
}
function createDB(){
var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
db.transaction(executeQuery, errorCB, successCB);
}
</script>
</head>
<body>
<h1>Execute the SQL</h1>
<input type="button" value="Execute SQL transactions" onclick="createDB()">
</body>
</html>最終更新
役に立ちましたか？