JavaScript を使用して HTML ページ間で変数を効果的に渡すにはどうすればよいですか?

ある HTML ページから別の HTML ページに JavaScript を介して変数を渡す

問題:

2 つの HTML ページ間で変数を渡す必要がありますJavaScript を使用した HTML ページ。変数の値は最初のページのテキスト ボックスにキャプチャされており、ユーザーがボタンをクリックした後、2 番目のページでその値にアクセスしたいとします。ただし、2 ページ目で変数を取得しようとすると、「未定義」値が発生します。

解決策:

localStorage の使用:

信頼性が低く管理が難しいグローバル変数を使用する代わりに、localStorage を利用してこの機能を実現できます。 localStorage は、アプリまたはブラウザーのタブを閉じた後でも、データをブラウザーにローカルに保存する方法を提供するブラウザー API です。 Cookie と比較すると、ストレージ制限が大きくなります。

実装:

1. ページ 1 (変数の保存):

   <code class="javascript">window.onload = function() {
     var getInput = prompt("Hey type something here: ");
     localStorage.setItem("storageName", getInput);
   }</code>

2. ページ 2 (変数の取得):

   <code class="javascript">window.onload = function() {
     alert(localStorage.getItem("storageName"));
   }</code>

説明:

• ページ 1 では、localStorage.setItem("storageName", getInput) を使用して、テキスト ボックスに入力された値を localStorage の storageName キーに保存します。
• Onページ 2 では、localStorage.getItem("storageName") を使用して storageName キーに格納されている値を取得し、アラート ボックスに表示します。

代替アプローチ:

• Cookie: Cookie を使用して変数を渡すこともできますが、Cookie のストレージ制限は小さく、リクエストごとにサーバーに送り返されるため、パフォーマンスとプライバシーに影響を与える可能性があります。
• セッション ストレージ: セッション ストレージは localStorage に似ていますが、現在のセッションの間のみ持続し、ユーザーがブラウザ タブを閉じるとクリアされます。特定のセッションのデータのみを保存する必要がある場合に使用できます。

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