Screw-Axis::doc

Chrome Extensions API リファレンス

ローカルストレージに配列やオブジェクトを格納する

拡張機能の設定などを保持しておくのに便利な localStorage ですが、記憶できる値は文字列だけです。

オブジェクトの格納を試そうとして、次のような結果になってしまった人もいるのではないでしょうか(自分です)。

var options = {
  prop1: "",
  prop2: 123,
  ...
}
localStorage['opt'] = options;

...

var options = localStorage['opt'];
console.log(options);

[実行結果]

[object Object]

一見オブジェクトが取得できたようですが、実のところ単に “[object Object]” という文字列が格納されていただけです。

このような場合、オブジェクトや配列もサイズが極端に大きくならないならば、JSON化して格納しておくことが出来ます。

var options = {
  prop1: "",
  prop2: 123,
  ...
}
localStorage['opt'] = JSON.stringify(options);

...

var options = JSON.parse(localStorage['opt']);
console.log(options);

[実行結果]

▼Object
    prop1: ""
    prop2: 123
    ...

きちんとオブジェクトが復元できました。

実際に使う場合は、例えば undefined を JSON.parse するとエラーになります。
初回実行で localStorage に値が無い場合などに充分注意しながら使ってください。