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

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

ページを更新した後でも JavaScript 変数の値を保持できる機能は、一般的なものです。 Web開発における要件。ブラウザのストレージ メカニズムを利用してこれを実現する方法を見てみましょう。

ブラウザのストレージについて

使用できるブラウザのストレージ メカニズムは主に 2 つあります。

• window.localStorage: ブラウザの再起動後も存続し、Web サイト全体に適用される永続ストレージ。
• window.sessionStorage: として持続する一時ストレージ。ブラウザ セッションが開いている限り。

変数の保存と取得

ローカル ストレージに変数を設定するには、次を使用します。

localStorage.setItem("variableName", value);

ページの更新後に変数の値を取得するには:

var retrievedValue = localStorage.getItem("variableName");

sessionStorage は同じパターンに従いますが、そのデータはブラウザー セッションが終了するとクリアされます。

追加の考慮事項

• ブラウザのストレージに直接保存できるのは文字列値のみです。より複雑なデータ型を保存するには、JSON.stringify() を使用します。
• ブラウザによって課されるサイズ制限があります。詳細については、ブラウザのドキュメントを確認してください。
• カスタム ライブラリを使用してストレージ メカニズムを抽象化するか、既存のライブラリを使用することをお勧めします。これにより、ストレージの種類に関係なくデータの処理が簡素化されます。

リソース

• [ブラウザ ストレージ ガイド](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 )

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