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 のオプションは、この方法を使って設定を管理ちう。
