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

ページ更新後の JavaScript 変数の保持

JavaScript では、ボタンのクリックやその他のイベントを通じて変数を動的に変更できます。ただし、デフォルトでは、ページが更新されると、これらの変更は失われます。ページを更新した後でも変数の値が確実に保持されるようにするにはどうすればよいですか?

ローカル ストレージとセッション ストレージ

JavaScript の永続ストレージは、次の 2 つの方法で実現されます: window.localStorageおよび window.sessionStorage。どちらもキーと値のペアを保存する手段を提供しますが、微妙な違いがあります。

• localStorage: データはブラウザーのセッションと再起動をまたいで無期限に保持されます。
• sessionStorage: データは現在のブラウザ セッション中にのみ保持され、ウィンドウまたはタブが終了するとクリアされます。

データの保存:

永続ストレージに変数を保存するには、目的のキーと値を指定して setItem() を使用します:

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

データの取得:

後ページを更新すると、getItem():

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

を使用して保存されたデータが取得されます。これにより、ページが更新された後でも、保存された値が someVarName に割り当てられます。

制限の克服:

ローカル ストレージとセッション ストレージは文字列値のみをサポートします。より複雑なデータ型を保存するには、JSON の使用を検討してください:

var obj = {
  prop1: "value1",
  prop2: "value2"
};

localStorage.setItem("objKey", JSON.stringify(obj));

後でデータを取得して解析します:

var obj = JSON.parse(localStorage.getItem("objKey"));

追加リソース:

• ブラウザのストレージ: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• LocalStorage: https://developer.mozilla.org/en-US/docs/DOM /Storage#localStorage

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