1. ホーム
  2. Web制作
  3. html5

HTML5のlocalStorageにオブジェクトを格納するサンプルコード

2022-01-21 23:13:34

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: オブジェクト
testObjectのプロパティです。
  1
  2: 2
  three: 3
typeof retrievedObject: string
retrievedObjectの値。[object オブジェクト]。

と思われるのですが setItem メソッドは、入力を文字列に変換してから保存しています。

解決策

Apple、Mozilla、Mozillaのドキュメントを改めて見てみると、この機能は文字列のキーと値のペアを扱うことに限定されているようです。

回避策の1つは、オブジェクトが 文字列化 を作成し、取得時にそれをパースします。

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

HTML5 localStorageのオブジェクトの保存については、この記事が全てです、HTML5 localStorageの詳細については、過去の記事を検索するか、引き続き以下の記事をご覧ください、今後ともよろしくお願いします。