ページを更新した後も JavaScript 変数の値を保持するにはどうすればよいですか?

ページ更新時の JavaScript 変数値の保持

JavaScript では、通常、ページが更新されると変数の値が失われます。この制限を克服するには、window.localStorage メソッドまたは window.sessionStorage メソッドを利用できます。

window.localStorage

localStorage を使用すると、永続的なキーと値のペアを保存できます。ブラウザの再起動を超えて。これは、単一のページだけでなく、Web サイト全体に適用されます。

更新後に永続化する必要がある変数を設定するには、次を使用します。

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

任意のページで永続化された値を取得するには、 use:

var someVarName = localStorage.getItem("someVarKey");

window.sessionStorage

sessionStorage は localStorage と同様に機能しますが、ブラウザーのタブが開いている間のみデータを保持します。これは、セッション固有の情報を一時的に保存するのに便利です。

sessionStorage を使用するには、上記の例で localStorage を sessionStorage に置き換えます。

考慮事項:

• localStorage と sessionStorage は文字列のみを保存できます。文字列以外の値を保存するには、JSON.stringify と JSON.parse を使用します。
• さまざまなデータ型の保存を容易にするために、ライブラリを使用するか、独自の抽象化を作成することをお勧めします。
• これらのメソッドは、サイトを提供します。 -幅広い持続性。混乱や潜在的な競合を避けるために、これらを慎重に使用してください。

参考資料:

• [DOM Storage](https://developer.mozilla.org) /en-US/docs/Web/Guide/API/DOM/Storage)
• [localStorage](https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage)
• [JSON](https://developer.mozilla.org/en-US/docs/JSON)
• [ブラウザ ストレージの互換性](http://caniuse.com/namevalue-storage )
• [HTML5 localStorage へのオブジェクトの保存](https://www.html5rocks.com/en/tutorials/storage/using-the-storage-api/)

以上がページを更新した後も JavaScript 変数の値を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。