以前、以下の 2つの記事を公開している「AlaSQL」の話です。

今回は、p5.js Web Editor上で AlaSQL を扱う際に、そのデータベースをブラウザの localStorage に保持する、というのを試してみます。

実際に試してみる

とりあえず使ってみる

とりあえず、localStorage にデータを保存しつつ、保存した値を取り出すというのを実際に試します。処理の流れは以下のとおりです。

localStorage にデータベースを未作成であれば、データベースを作成する
テーブルが未作成であれば、テーブルを作成する
テーブルが作成済みだった場合に、前のデータ残っているかもしれないため、それを消去
空のデータベースに 3つの値・文字のセットを書き込んで、その後に値を計算して更新
データベースから値を得て出力

実装した内容全体は、以下のとおりです。

function setup() {
  createCanvas(400, 400);
  background(220);

  alasql("CREATE LOCALSTORAGE DATABASE IF NOT EXISTS p5test");
  alasql("ATTACH LOCALSTORAGE DATABASE  p5test");

  alasql("CREATE TABLE IF NOT EXISTS p5test.db  (language INT, hello STRING)");
  alasql("DELETE FROM p5test.db");

  alasql("INSERT INTO p5test.db VALUES (1,'Hello!')");
  alasql("INSERT INTO p5test.db VALUES (2,'Aloha!')");
  alasql("INSERT INTO p5test.db VALUES (3,'Bonjour!')");

  alasql("UPDATE p5test.db SET language = floor(language * 2)");

  const result1 = alasql("SELECT * FROM p5test.db WHERE language > 2");
  console.log(result1);
  const result2 = alasql("SELECT * FROM p5test.db");
  console.log(result2);
}

これを実行した結果、コンソールに以下の意図通りの内容が出力されました。

また、ブラウザの開発者ツールを使って localStorage の内容を見てみたところ、以下のように、上記の処理で保存したものを確認することができました。

ページリロード後に保持されているかを確認してみる

次に、実装内容を以下に変更して、ページがリロードされても保存済みの内容が保持されているかを確認します。

function setup() {
  createCanvas(400, 400);
  background(220);
}

function keyPressed() {
  if (key === "q") {
    alasql("CREATE LOCALSTORAGE DATABASE IF NOT EXISTS p5test");
    alasql("ATTACH LOCALSTORAGE DATABASE  p5test");

    alasql(
      "CREATE TABLE IF NOT EXISTS p5test.db  (language INT, hello STRING)"
    );
    alasql("DELETE FROM p5test.db");

    alasql("INSERT INTO p5test.db VALUES (1,'Hello!')");
    alasql("INSERT INTO p5test.db VALUES (2,'Aloha!')");
    alasql("INSERT INTO p5test.db VALUES (3,'Bonjour!')");

    alasql("UPDATE p5test.db SET language = floor(language * 2)");

    console.log(alasql("SELECT * FROM p5test.db"));
  } else if (key === "z") {
    alasql("ATTACH LOCALSTORAGE DATABASE  p5test");

    const result1 = alasql("SELECT * FROM p5test.db WHERE language > 2");
    console.log(result1);
    const result2 = alasql("SELECT * FROM p5test.db");
    console.log(result2);
  }
}

確認手順は以下としました。それを試した結果、ページをリロードした後でも、意図通りに保存済みの内容を取得できることを確認できました。

確認手順
1. ブラウザの開発者ツールで、localStorage の中身を消去する
2. 上記の処理を実行した後、「z」キーを押し、エラーがでることを確認（1つ前の手順で、localStorage の中が空であるため、読み出しがエラーとなる）
3. 「q」キーを押して、localStorage にデータを保存
4. ページをリロードする
5. 上記の処理を実行した後、「z」キーを押して、値の取得・出力ができることを確認

参考