読者です 読者をやめる 読者になる 読者になる

localStorage でオプション設定の管理

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"] ); // 1つ1つキーを作るのは管理的に辛い...  
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 のオプションは、この方法を使って設定を管理ちう。