ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript オブジェクトを HTML5 localStorage および sessionStorage に保存するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-20 06:21:10
オリジナル
736 人が閲覧しました

How Can I Store JavaScript Objects in HTML5 localStorage and sessionStorage?

HTML5 ストレージへのオブジェクトの保存: 制限の理解と回避策の実装

HTML5 の localStorage と sessionStorage は、ユーザーのデバイスにデータを保存するための便利なオプションを提供します。ただし、JavaScript オブジェクトのような複雑なデータ構造を保存しようとすると、開発者はオブジェクトの文字列への変換の問題に遭遇することがよくあります。

オブジェクトを HTML5 ストレージに保存するには、そのネイティブ機能が string key/ のみをサポートしていることを認識することが重要です。値のペア。この制限は、ストレージ メカニズムに設計された単純さとパフォーマンスの考慮事項から発生します。

この制限を克服するための一般的な回避策は、オブジェクトを「シリアル化」し、オブジェクトを格納可能な文字列形式に変換することです。 JSON.stringify() メソッドを使用すると、オブジェクトを JSON 文字列表現に変換できます。

次のコード スニペットは、そのプロセスを示しています。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
localStorage.setItem('testObject', JSON.stringify(testObject));
ログイン後にコピー

保存されているデータを取得する必要がある場合オブジェクトの場合、JSON.parse():

var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
ログイン後にコピー

を使用して JSON 文字列を解析してオブジェクトに戻すことができます。この回避策を使用すると、 HTML5 ストレージにオブジェクトを効果的に保存および取得でき、アプリケーション内の複雑なデータを管理するためのメカニズムを提供します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート