【Javascript】localStrageに値を格納するとき

Tweet

Category html5, JavaScript 2012/08/18

問題

localStrageにオブジェクトを格納したいのに、localStrageには文字列しか入らない環境が結構あるらしい。

オブジェクトを格納しようとしたら”[object Object]”になったりする。面倒だ。。。

答え

JSON.stringify、JSON.parseに、だいたいのブラウザが対応しているので、そういうものだと割り切って、以下のように書くとよいと思います。

// 値の格納
localStorage.test = JSON.stringify({testKey : "testValue", test2Key : "test2Value"});

// 値の呼び出し
JSON.parse(localStorage.test); 

IE7以前などに対しては、何かしらのライブラリなどで、JSON.stringify、JSON.parseに対応させる。

メモ

JSON対応ブラウザ

IE 8，Firefox 3.5，Safari 4.0.2，Google Chrome 2，Opera 10.50 など

かつてのHTML5の仕様では

localStrageに格納できるのはオブジェクトでも文字列でも何でもありだったようだ。

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
  deleter void removeItem(in DOMString key);
  void clear();
};

2009年の仕様書より

現在のHTML5の仕様では

localStrageに格納できるのはキーも値も文字列のようだ。だからオブジェクトを格納しようとはしない方がよさそうだ。

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

新しい仕様書より