HTML5 localStorage/sessionStorageにオブジェクトを保存する方法 質問する

HTML5 localStorage/sessionStorageにオブジェクトを保存する方法 質問する

JavaScript オブジェクトを HTML5 に保存したいのです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 ウェブストレージブラウザ固有のバグや制限ではなく、仕様です。

私は、構造化クローンアルゴリズムを理解しようとしました2 共通インフラ何を言っているのか完全には理解していませんが、おそらく私の問題はオブジェクトのプロパティが列挙可能ではないことに関係しているのでしょう (???)。

簡単な回避策はありますか?


更新: W3Cは最終的に構造化クローン仕様について考えを変え、実装に合わせて仕様を変更することを決定しました。12111 – ストレージオブジェクトの getItem(key) メソッドの仕様が実装の動作と一致しませんしたがって、この質問はもはや 100% 有効ではありませんが、回答はまだ興味深いものかもしれません。

ベストアンサー1

を見てりんごモジラそして再びMozillaドキュメントによると、機能は文字列のキー/値のペアのみを処理するように制限されているようです。

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

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));

おすすめ記事