JavaScript オブジェクトを HTML5 の localStorage および sessionStorage に保存する

Web ストレージ内のオブジェクトの操作

HTML5 localStorage または sessionStorage を使用する場合、開発者が JavaScript オブジェクトを保存しようとすると、問題が発生することがよくあります。プリミティブなデータ型や配列とは異なり、オブジェクトは文字列に変換されるように見えるため、混乱や予期しない結果が生じる可能性があります。

Web Storage を使用してオブジェクトを適切に保存および取得する方法を理解することは、多くの Web アプリケーションにとって重要です。このガイドでは、オブジェクトが文字列に変換される理由を調査し、オブジェクトが正しく保存および取得されることを確認するための簡単な回避策を提供します。

指示	説明
JSON.stringify()	JavaScript オブジェクトまたは値を JSON 文字列に変換し、localStorage または sessionStorage に保存できるようにします。
localStorage.setItem()	キーと値のペアを localStorage オブジェクトに保存し、ブラウザー セッション間でデータを保持できるようにします。
localStorage.getItem()	指定されたキーに関連付けられた値を localStorage から取得します。
JSON.parse()	JSON 文字列を解析して JavaScript オブジェクトに変換し、複雑なデータ構造を取得できるようにします。
sessionStorage.setItem()	キーと値のペアを sessionStorage オブジェクトに保存し、ページ セッションの間データを保持できるようにします。
sessionStorage.getItem()	指定されたキーに関連付けられた値を sessionStorage から取得します。

Web ストレージでのオブジェクトの効果的な保存と取得

JavaScriptでは、 そして は、キーと値のペアをブラウザーに保存できる Web ストレージ オブジェクトです。ただし、これらのストレージ ソリューションは文字列のみをサポートします。つまり、JavaScript オブジェクトを直接保存しようとすると、オブジェクトは次のような文字列表現に変換されます。 。オブジェクトを効果的に保存するには、次を使用してオブジェクトを JSON 文字列に変換する必要があります。 JSON.stringify()。このメソッドは JavaScript オブジェクトを受け取り、次の場所に保存できる JSON 文字列を返します。 または 。

保存されたオブジェクトを取得するには、次を使用して JSON 文字列を JavaScript オブジェクトに変換し直す必要があります。 。このメソッドは JSON 文字列を受け取り、対応する JavaScript オブジェクトを返します。上記の例で提供されているスクリプトは、このプロセスを示しています。まず、オブジェクトが作成され、次のように JSON 文字列に変換されます。 に保管される前に を使用して localStorage.setItem()。オブジェクトを取得するには、JSON 文字列が次から取得されます。 を使用して 次に、次を使用して解析して JavaScript オブジェクトに戻します。 。

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Web ストレージの高度なテクニック

HTML5を使用する場合 そして 、開発者は多くの場合、単なる文字列ではなく、より複雑なデータを保存する必要があります。 JSON のシリアル化と逆シリアル化は基本的なオブジェクトには効果的ですが、より高度なシナリオでは追加の考慮事項が必要になる場合があります。たとえば、深くネストされたオブジェクトやメソッドを含むオブジェクトを操作している場合は、より洗練されたアプローチが必要です。一般的な手法の 1 つは、次のようなライブラリを使用することです。 または circular-json 循環参照やより複雑なオブジェクト構造を処理します。

これらのライブラリは標準を拡張します そして 循環参照を使用したオブジェクトのシリアル化と逆シリアル化をサポートするメソッドにより、オブジェクトを Web ストレージに保存するためのより堅牢なソリューションが可能になります。もう 1 つの考慮事項は、データ圧縮です。大きなオブジェクトの場合は、次のようなライブラリを使用できます。 データを保存する前に圧縮する localStorage または 、使用されるスペースの量を削減します。これは、大量のクライアント側データを保存する必要があるアプリケーションに特に役立ちます。

1. 関数を保存できますか? または ?
2. いいえ、関数を Web ストレージに直接保存することはできません。関数コードを文字列として保存して使用できます。 再作成することもできますが、これはセキュリティ上のリスクがあるため、通常はお勧めできません。
3. オブジェクト内の循環参照はどのように処理すればよいですか?
4. 次のようなライブラリを使用します または これは、JavaScript オブジェクトの循環参照を処理するように設計されています。
5. ストレージ制限は何ですか ?
6. ストレージ制限 通常は約 5MB ですが、ブラウザによって異なる場合があります。
7. データを保存する前に圧縮できますか?
8. はい、次のようなライブラリを使用できます データを保存する前に圧縮する または 。
9. オブジェクトの配列を保存するにはどうすればよいですか?
10. 次を使用して配列を JSON 文字列に変換します。 に保管する前に または 。
11. 機密データを保存するのは安全ですか? ?
12. いいえ、機密データを保存するのは安全ではありません JavaScript を通じてアクセスできるため、サイトが攻撃された場合に侵害される可能性があります。
13. 使ってもいいですか 異なるドメイン間で?
14. いいえ、 は同じオリジンに制限されており、異なるドメインを越えてアクセスすることはできません。
15. ユーザーがブラウザのデータを消去するとどうなりますか?
16. に保存されているすべてのデータ そして ユーザーがブラウザのデータを消去すると削除されます。

HTML5 Web ストレージにオブジェクトを効果的に保存および取得するには、次のコマンドを使用してオブジェクトを JSON 文字列に変換する必要があります。 そしてそれらを解析して戻します 。この方法では、データがそのままの状態で維持され、さまざまなブラウザー セッション間で使用できることが保証されます。これらの手法を理解して活用することで、開発者は localStorage と sessionStorage を活用してより複雑なデータ管理タスクを実行し、Web アプリケーションの機能とパフォーマンスを向上させることができます。