javascript WebSQLを使用する

作成日 2020.10.22
更新日 2022.07.13
javascript
javascript

javascriptで、ブラウザ上で利用できるdatabaseであるWebSQLを使用する記述するサンプルコードを記述してます。

1. 環境
2. WebSQL使用

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

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」が作成されていることが確認できます。

次にテーブルを作成します。

<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>

実行結果を見るとテーブルが作成されていることが確認できます。

次に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>

データが挿入されたことが確認できます。

次に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要素に出力されていることが確認できます。

最後に、「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」すると、データが削除されたことが確認できます。