ホームページ  >  記事  >  ウェブフロントエンド  >  ページを更新した後も JavaScript 変数の値を保持するにはどうすればよいですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-17 02:11:03249ブラウズ

How Can I Keep JavaScript Variable Values After a Page Refresh?

ページ更新後の JS 変数値の維持

ページ更新後の JavaScript 変数値の維持は、動的な Web アプリケーションとユーザー固有の情報の保持に不可欠です。 。これを実現するには、ページがリロードされてもデータを保持する Web ストレージ メカニズムを活用する必要があります。

強力なツールの 1 つは localStorage です。これを使用すると、データをブラウザに永続的に保存できます。ウェブサイト全体。これは、複数のセッションにわたって情報を保持したい場合に有利です。 localStorage を使用して値を設定するには、

window.localStorage.setItem("variableName", value);

を使用します。値を取得するには、単に次を使用します。

let retrievedValue = window.localStorage.getItem("variableName");

または、ローカルストレージ内にのみ保存されるデータを保存する必要がある場合は、現在のブラウザ セッションでは、sessionStorage を使用できます。構文は localStorage に似ていますが、sessionStorage はブラウザ ウィンドウを閉じるとデータを消去します。

window.sessionStorage.setItem("variableName", value);
let retrievedValue = window.sessionStorage.getItem("variableName");

これらのメカニズムに直接保存できるのは文字列値のみであることに注意することが重要です。他のデータ型を保存するには、変換に JSON.stringify() および JSON.parse() を使用することを検討してください。

localStorage をサポートしていないブラウザの詳細情報と回避策については、次のリソースを参照してください。 :

  • [MDN の DOM ストレージ ガイド](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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。