以前、以下の 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);
}
}
確認手順は以下としました。それを試した結果、ページをリロードした後でも、意図通りに保存済みの内容を取得できることを確認できました。
- 確認手順
- ブラウザの開発者ツールで、localStorage の中身を消去する
- 上記の処理を実行した後、「z」キーを押し、エラーがでることを確認（1つ前の手順で、localStorage の中が空であるため、読み出しがエラーとなる）
- 「q」キーを押して、localStorage にデータを保存
- ページをリロードする
- 上記の処理を実行した後、「z」キーを押して、値の取得・出力ができることを確認