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

JavaScript を使用した HTML ページ間での変数の受け渡し

Web 開発では、多くの場合、2 つの HTML ページ間でデータを転送する必要があります。一般的なアプローチの 1 つは、JavaScript を使用してデータをグローバル変数に保存し、2 番目のページでそれを取得することです。ただし、グローバル変数が適切に宣言されていないかアクセスされていない場合、このメソッドでは問題が発生する可能性があります。

次のシナリオを考えてみましょう。

• 「ページ 1」と「ページ」という 2 つのページがあるとします。 2"。
• ページ 1 では、テキストボックスに値 (例: 100) が含まれています。
• ボタンをクリックすると、JavaScript はテキストボックスの値をグローバル変数に保存し、ページ 2 にリダイレクトします。
• ページ 2 で、onload 関数はページ 1 に格納されている値を取得して表示しようとします。

ただし、onload 関数はグローバル変数に対して常に「未定義」を返します。

ローカル ストレージを使用した解決策

この問題を解決するための別のアプローチは、localStorage を利用することです。ローカル ストレージは、データを保存および取得するためのより信頼性が高く安全な方法を提供します。

• ページ 1:

  次を使用してテキスト ボックスの値を localStorage に保存します。 setItem() メソッドは次のようになります。

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

• ページ 2:

  getItem( ) メソッドを呼び出し、以下に示すように、alert() を使用して表示します。

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

localStorage を使用すると、異なる HTML ページ間でデータの一貫した保存と取得を保証できます。このアプローチは信頼性が高く、効率的です。

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