HTML5 localStorage および sessionStorage で JavaScript オブジェクトを保存および取得するにはどうすればよいですか?

HTML5 の localStorage および sessionStorage へのオブジェクトの保存

オブジェクトは、HTML5 の localStorage または sessionStorage 内ではネイティブにサポートされていません。オブジェクトを直接保存しようとすると、オブジェクトは文字列にシリアル化されます。

この制限を回避するには、次の回避策を検討してください:

1. オブジェクトを文字列化する: オブジェクトを保存する前に、次を使用してオブジェクトを JSON 文字列に変換します。 JSON.stringify.
2. 文字列を保存します: setItem('key', JSON_string) を使用して JSON 文字列を localStorage または sessionStorage のキーに割り当てます。
3. 文字列を取得します: オブジェクトを取得するときに、次を使用して JSON 文字列を取得します。 getItem('key').
4. 文字列を解析します: 取得した文字列を JSON.parse を使用してオブジェクトに戻します。

例:

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

// Stringify and store
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve and parse
const retrievedObject = JSON.parse(localStorage.getItem('testObject'));

console.log('Retrieved object:', retrievedObject);

この手法を使用すると、JavaScript オブジェクトの固有の性質にもかかわらず、localStorage と sessionStorage に JavaScript オブジェクトを保存および取得できます。文字列ベースのストレージの性質。

以上がHTML5 localStorage および sessionStorage で JavaScript オブジェクトを保存および取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。