スコープ制限のあるJavaScriptでHTMLページ間で変数を渡すにはどうすればよいですか?

HTML ページ間で JavaScript で変数を渡す

ある HTML ページ (ページ 1) から別のページに変数を渡そうとすると、問題が発生します。 JavaScript を使用した別の (ページ 2)。グローバル変数を宣言しようとしているにもかかわらず、ページ 2 では値が未定義のままです。この記事は、JavaScript 変数の制限を調査し、代替アプローチを提供することで、この問題の解決策を提供することを目的としています。

理解JavaScript 変数のスコープ

JavaScript 変数には特定のスコープがあり、これにより、アクセスできるコードの部分が決まります。あなたが提供したコードは、変数価格を関数の外で宣言し、それをグローバルにしようとしています。ただし、JavaScript が認識するのは、HTML ドキュメントの先頭にある script タグ内で var キーワードを使用してグローバルに宣言された変数のみです。

ページ間通信に LocalStorage を使用する

代わりにグローバル変数に依存するよりも、クロスページ通信のためのより堅牢なアプローチは、LocalStorage を使用することです。 LocalStorage を使用すると、ページが更新されたりブラウザが閉じられたりした場合でも保持されるキーと値のペアを保存できます。

ページ 1 コード:

<code class="html">&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function() {
   var getInput = prompt("Hey type something here: ");
   localStorage.setItem("storedPrice", getInput);
}
&lt;/script&gt;</code>

ページ 2 コード:

<code class="html">&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function() {
   alert(localStorage.getItem("storedPrice"));
}
&lt;/script&gt;</code>

このアプローチでは、入力された値をページ 1 の LocalStorage に保存し、ページのロード時にページ 2 で取得します。 LocalStorage は最新のブラウザでサポートされており、クロスページ通信のための信頼できるメカニズムを提供します。

以上がスコープ制限のあるJavaScriptでHTMLページ間で変数を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。