2016/06/06

[JavaScript・jQuery]WebStorageを用いた画面の状態の保存

「食費記憶アプリ」「艦これ:制空値計算・記録アプリ」ともにWebStorage機能を使っている。まだ少し使っただけだが、非常に便利だと感じている。

WebStorageを使う上で重要な事は、「ページが閉じられ、再び開かれるまで記憶し続けなければならないものは何か」ということだ。
例えば食費記憶アプリでは閉じられる時点の累積費用を、艦これ制空値アプリでは閉じられる時点に登録されている艦隊編成の情報を、それぞれ再び保持しなければならない。

次に問題になるのが、どのような形式で保持するか、ということになる。WebStorageは基本的にKey,Valueともに文字列にしなければならない。上述の二例で言うと、食費記憶アプリは累積費用の数字を文字列として保存すればそれでいい。問題になるのは艦これ制空値アプリのように、複数の値(艦隊名・艦名・艦載機など)を記憶したい場合どうすればいいか、ということだ。
一つの解決策はJSONの利用。記憶したい値を配列にでも代入しておいて、JSON.stringifyで配列を変換して登録。読み出すときはJSON.parseを使えばもとの配列に戻すことができる。この解決策はWeb Storage について - へっぽこプログラマーの日記で解説されている。

一方私が用いたのは、jQueryとの組み合わせだ。
艦これ制空値計算・記録アプリでは、計算タブの登録ボタンを押すと記録タブに新たなタグが追加されるようになっている。
制空値記録側に艦隊構成が表示される際に用いているのはjQuery。追加する内容をHTMLで書き、文字列として変数に代入し、.append()を使ってタグを追加している。この「文字列として変数に代入」というところがヒントになった。要は、この文字列(HTMLタグ)をそのままValueとして記録すればいいのだ。
この方法を使えば、再度ページを開いた際にいちいちparseして表示するHTMLを書いて、という処理を書く手間が軽減される。ただし、記憶量が多くなるという欠点はある。しかし5MBまで記憶できるのだから、多少Valueの容量が増えても問題なさそう。

また、この方法を使えばそもそも艦隊構成ごとにK-Vを作らないやり方も考えられる。記録の表示欄の全体のHTMLをjQueryで読み込み、一つのValueとして保存すればよい。
艦隊編成の追加時にはjQueryでタグを追加し、その直後に表示欄のHTMLを読み取ってWebStorageに保存すればよいし、削除時には任意の編成の欄のみ削除した上で表示欄のHTMLを読み取り保存し、ページをリロードするようにすればよい。

割と単純にWebStorageを使うだけでいろいろな機能を実現できるような気がしてきた。

0 件のコメント:

コメントを投稿