[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は？

質問

HTML5でJavaScriptのオブジェクトを格納したい localStorage しかし、私のオブジェクトはどうやら文字列に変換されているようです。

JavaScript のプリミティブ型や配列の保存と取得は localStorage しかし、オブジェクトは機能しないようです。 どうすればいいのでしょうか？

以下は私のコードです。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

コンソール出力は

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

のように見えますが setItem メソッドは、入力を文字列に変換してから保存しています。

この動作は、Safari、Chrome、Firefoxで確認できますので、私の誤解であると思われます。 HTML5 ウェブストレージ の仕様であり、ブラウザ固有のバグや制限ではありません。

の意味を理解しようとしたことがあります。 構造化クローン で説明されているアルゴリズムです。 http://www.w3.org/TR/html5/infrastructure.html . 私はそれが言っていることを完全に理解していないが、多分私の問題は私のオブジェクトのプロパティが列挙可能でないことと関係がある(????)

簡単な回避策はあるのでしょうか？

更新：W3Cは最終的にstructured-clone仕様について考えを改め、実装に合わせた仕様に変更することを決定しました。 参照 https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111 . ですから、この質問はもはや100％有効ではありませんが、回答はまだ興味を引くかもしれません。

どのように解決するのですか？

を見ると アップル , モジラ と 再びモジラ のドキュメントによると、この機能は文字列のキーと値のペアのみを扱うように制限されているようです。

回避策としては 文字列化 を保存する前にオブジェクトを解析し、後でそれを取得するときに解析します。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));