JavaScript を使用して HTML ページ間で変数を渡す

Question

「ページ 1」と「ページ 2」の 2 つのページがあります。 1 ページ目には、たとえば 100 という値が設定されたテキスト ボックスとボタンがあります。

ボタンを押した後、JavaScript でテキスト ボックスの値をグローバル変数に保存し、ページ 2 にジャンプするようにします。 「window.onload」を使用して、2 番目の JavaScript 関数でページ 1 に保存された値をポップします。

これは私の JavaScript コードです:

<script type="text/javascript">

var Price; //関数外で宣言 = グローバル変数?

関数 save_price(){

    alert("started_1"); //参照のみ

    価格 = document.getElementById('the_id_of_the_textbox').value;

    alert(price); //参考のみ
}

<script type="text/javascript">

関数 read_price(){

    アラート("開始_2");

    アラート(価格);

}

「ページ 1」には送信ボタンがあります:

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;

JavaScript 関数が起動され、ページ 2 に正しくリダイレ​​クトされます。

しかし、2 ページ目では:

window.onload=read_price();

グローバル変数の価格として常に「未定義」の値が取得されます。

これらのグローバル変数についてはたくさん読みました。たとえば、このページでは次のようになります。 グローバル変数に問題があります。しかし、それを機能させることができません...

これがうまくいかないのはなぜですか?

Answer 1

ここでの最善のオプションは、クエリ文字列を使用して値を「送信」することです。

JavaScript を使用してクエリ文字列値を取得する方法

• つまり、ページ 1 は page2.html?someValue=ABC
にリダイレクトされます。
• ページ 2 では、クエリ文字列、特にキー「someValue」を読み取ることができます

これが単なる学習演習以上の場合は、これを行う際の安全性を考慮する必要があるかもしれません。

グローバル変数は、ページがリロードされると破棄されるため、ここでは役に立ちません。

Answer 2

コードを読まず、シナリオだけを読んで、localStorage を使用して解決します。 ここでは、単純化するために prompt() を使用する例を示します。

1ページ目:

リーリー

2ページ目:

リーリー

Cookie を使用することもできますが、localStorage ではより多くのスペースが許可され、ページがリクエストされたときにサーバーに Cookie が送り返されません。