Google Chrome extension のオプション設定周りについてのメモ。
localStorage は、データをローカルに保存したり管理したりする機能。
Chromeブラウザのキャッシュをクリアすると保存データも一緒に消えてしまったり。
永続的に保存することができるわけではないらしい。
あと、html5 の機能で Chrome 独自の機能というわけではないらしい。
キーと値の連想配列ような感じで使える。文字列しか保存できないといった制限がある模様。
Chrome extension ではこの機能をオプション設定の管理に用いることが多い様子。
簡単な使い方
localStorage.setItem( "short_cut1", "ctrl" ); localStorage.setItem( "short_cut2", "shift" ); var val1 = localStorage.getItem( "short_cut1" ); // ctrl という文字列が取得される var val2 = localStorage.getItem( "short_cut2" ); // shift という文字列が取得される |
というように例えばショートカットの設定なんかに使ったりする。
しかし、文字列しか保存できない制限の為、設定が構造的な場合、管理が煩雑になってしまったりする。
var hoge_option = {} // hoge 設定用の連想配列 hoge_option["short_cut1"] = "ctrl"; hoge_option["short_cut2"] = "shift"; //localStorage.setItem( "hoge_option", hoge_option ); // 本当はこうしたいけど、文字列しか保存できない。 localStorage.setItem( "hoge_short_cut1", hoge_option["short_cut1"] ); // １つ１つキーを作るのは管理的に辛い... localStorage.setItem( "hoge_short_cut2", hoge_option["short_cut2"] ); |
構造的に保存
文字列しか保存できないなら、連想配列を文字列に変換して保存すればいいじゃない。
文字列から連想配列への変換には eval を使ってみた。
// 連想配列を文字列へ変換する関数 function toSource( elm ) { var out = ''; for( var key in elm ){ if( out != '' ) out += ','; out += "'"+key+"':'"+elm[key]+"'"; } return '{' + out + '}'; } var hoge_option = {} hoge_option["short_cut1"] = "ctrl"; hoge_option["short_cut2"] = "shift"; localStorage.setItem( "hoge_option", toSource( hoge_option ) ); // {'short_cut1':'ctrl', 'short_cut2':'shift'} という文字列が保存される。 eval( "var hoge_out = " + localStorage.getItem( "hoge_option" ) ); hoge_out["short_cut1"]; // ctrl という文字列が取得される hoge_out["short_cut2"]; // shift という文字列が取得される |
toSource 関数は改善の余地が多分にあるけど、まぁ大体こんな感じでいけるっぽい。
eval が遅いとかありそうだけど、オプションのロードで最初に1回呼び出すぐらいなら問題ないと思いたい。
FastLookUp for Chrome のオプションは、この方法を使って設定を管理ちう。
ピンバック: localStorage でオプション設定の管理 その２ | NINXIT-BLOG
ピンバック: HTML5 で作る iPhone ローカル Web アプリ入門 – OTCHY.NET