p5.js Web Editor上で AlaSQL と localStorage の組み合わせを試してみる

以前、以下の 2つの記事を公開している「[AlaSQL](https://alasql.org/)」の話です。

- [ブラウザ上で AlaSQL を利用するための下調べ（簡単なメモ） - Qiita](https://qiita.com/youtoy/items/f36138ddcb2e696dc5db)
-  [p5.js Web Editor上で AlaSQL を動かしてみる - Qiita](https://qiita.com/youtoy/items/3dd6a652b63b60711318)

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

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

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

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

```javascript
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);
}
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9de7a829-ebb4-778a-9e93-806928cde933.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0eaac39a-70f8-d10c-6f55-2de635ae3f2c.png)

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

```javascript
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 の中身を消去する
   1. 上記の処理を実行した後、「z」キーを押し、エラーがでることを確認（1つ前の手順で、localStorage の中が空であるため、読み出しがエラーとなる） 
   1. 「q」キーを押して、localStorage にデータを保存
   1. ページをリロードする
   1. 上記の処理を実行した後、「z」キーを押して、値の取得・出力ができることを確認

## 参考

- [ローカルストレージ上にAlaSQLのデータベースを構築する | あんこエデュケーション](https://anko.education/archives/633)
- [ブラウザでも使えるSQL「AlaSQL」を試そう ~動作確認から検索画面まで~ - 虎の穴開発室ブログ](https://toranoana-lab.hatenablog.com/entry/2021/01/22/182928)
- [AlaSQL — alasql_wiki documentation](https://alasql-wiki.readthedocs.io/en/latest/readme.html#localstorage-and-dom-storage)
- [Web Storage (localStorage, sessionStorage) の概要と使い方 | Articles | Riotz.works](https://riotz.works/articles/lopburny/2019/09/06/introduction-and-use-of-web-storage/)
- [ウェブストレージ API の使用 - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)