javascript WebSQLを使用する
- 作成日 2020.10.22
- 更新日 2022.07.13
- javascript
- javascript
![javascript WebSQLを使用する](https://mebee.info/wp-content/uploads/2019/10/wp-2.png)
javascriptで、ブラウザ上で利用できるdatabaseであるWebSQLを使用する記述するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.114
WebSQL使用
まずは、DBを作成してみます。
<script>
let db; // DB
const dbname = "dbname"; // 名前
const dbversion = "1.0"; // バージョン
const dbdescription = "Test Database";
const dbsize = 2 * 1024 * 1024; // size
function OpenDatabase() {
db = openDatabase(dbname, dbversion, dbdescription, dbsize);
}
OpenDatabase()
</script>
実行して、コンソールで確認すると「dbname」という「database」が作成されていることが確認できます。
![](https://mebee.info/wp-content/uploads/2022/07/image-67.png)
次にテーブルを作成します。
<span id="msg"></span>
<script>
let db; // DB
const dbname = "dbname"; // 名前
const dbversion = "1.0"; // バージョン
const dbdescription = "Test Database";
const dbsize = 2 * 1024 * 1024; // size
function OpenDatabase() {
db = openDatabase(dbname, dbversion, dbdescription, dbsize);
}
OpenDatabase()
function CreateTable() {
db.transaction(
function (transact) {
transact.executeSql("CREATE TABLE user ( id, name)", [],
function () { print("CREATE TABLE SUCCESS"); },// 成功コールバック
function () { print("CREATE TABLE ERROR"); }// 失敗コールバック
);
}
);
}
// 適当な要素に結果を出力
function print(msg) {
console.log(msg)
document.getElementById("msg").innerHTML += msg + "<br>";
}
CreateTable()
</script>
実行結果を見るとテーブルが作成されていることが確認できます。
![](https://mebee.info/wp-content/uploads/2022/07/image-68.png)
次にinsertして、データを挿入してみます。
<span id="msg"></span>
<script>
let db; // DB
const dbname = "dbname"; // 名前
const dbversion = "1.0"; // バージョン
const dbdescription = "Test Database";
const dbsize = 2 * 1024 * 1024; // size
function OpenDatabase() {
db = openDatabase(dbname, dbversion, dbdescription, dbsize);
}
OpenDatabase()
function CreateTable() {
db.transaction(
function (transact) {
transact.executeSql("CREATE TABLE user ( id, name)", [],
function () { print("CREATE TABLE SUCCESS"); },// 成功コールバック
function () { print("CREATE TABLE ERROR"); }// 失敗コールバック
);
}
);
}
// 適当な要素に結果を出力
function print(msg) {
console.log(msg)
document.getElementById("msg").innerHTML += msg + "<br>";
}
CreateTable()
function InsertRecord() {
db.transaction(
function (transact) {
transact.executeSql("INSERT INTO user VALUES ( ?, ? )", ['1', '山田'],
function () { print("Insert Record SUCCESS"); },
function () { print("Insert Record ERROR"); }
);
transact.executeSql("INSERT INTO user VALUES ( ?, ? )", ['2', '熊田'],
function () { print("Insert Record SUCCESS"); },
function () { print("Insert Record ERROR"); }
);
}
);
}
InsertRecord()
</script>
データが挿入されたことが確認できます。
![](https://mebee.info/wp-content/uploads/2022/07/image-69.png)
次にselectして、結果を出力してみます。
<span id="msg"></span>
<span id="result"></span>
<script>
let db; // DB
const dbname = "dbname"; // 名前
const dbversion = "1.0"; // バージョン
const dbdescription = "Test Database";
const dbsize = 2 * 1024 * 1024; // size
function OpenDatabase() {
db = openDatabase(dbname, dbversion, dbdescription, dbsize);
}
OpenDatabase()
function CreateTable() {
db.transaction(
function (transact) {
transact.executeSql("CREATE TABLE user ( id, name)", [],
function () { print("CREATE TABLE SUCCESS"); },// 成功コールバック
function () { print("CREATE TABLE ERROR"); }// 失敗コールバック
);
}
);
}
// 適当な要素に結果を出力
function print(msg) {
console.log(msg)
document.getElementById("msg").innerHTML += msg + "<br>";
}
CreateTable()
function InsertRecord() {
db.transaction(
function (transact) {
transact.executeSql("INSERT INTO user VALUES ( ?, ? )", ['1', '山田'],
function () { print("Insert Record SUCCESS"); },
function () { print("Insert Record ERROR"); }
);
transact.executeSql("INSERT INTO user VALUES ( ?, ? )", ['2', '熊田'],
function () { print("Insert Record SUCCESS"); },
function () { print("Insert Record ERROR"); }
);
}
);
}
InsertRecord()
function SelectRecord() {
db.transaction(
function (transact) {
transact.executeSql("select * from user where id = ?", ['2'],
function (rt, rs) {
for (let i = 0; i < rs.rows.length; i++) {
let row = rs.rows.item(i);
result_print(row.id + ", " + row.name);
}
},
function () { print("Insert Record ERROR"); }
);
}
);
}
function result_print(msg) {
document.getElementById("result").innerHTML += msg + "<br>";
}
SelectRecord()
</script>
クエリを実行した結果が、html要素に出力されていることが確認できます。
![](https://mebee.info/wp-content/uploads/2022/07/image-70.png)
最後に、「drop」してみます。
<script>
function DropTable() {
db.transaction(
function (transact) {
transact.executeSql("DROP TABLE IF EXISTS user", [],
function () { print("DROP TABLE SUCCESS"); },
function () { print("DROP TABLE ERROR"); }
);
}
);
}
DropTable()
</script>
「drop」すると、データが削除されたことが確認できます。
![](https://mebee.info/wp-content/uploads/2020/10/image-97-1024x364.png)
-
前の記事
C# 配列の中に一致する値があるかを判定する 2020.10.22
-
次の記事
javascript html要素の座標を取得する 2020.10.22
コメントを書く