Lulus pembolehubah antara halaman HTML menggunakan JavaScript

Question

Saya mempunyai dua halaman - "Halaman 1" dan "Halaman 2". Pada halaman 1 terdapat kotak teks dengan nilai contohnya 100, dan butang.

Selepas menekan butang, saya mahu JavaScript menyimpan nilai kotak teks dalam pembolehubah global dan melompat ke halaman 2. Menggunakan "window.onload", saya mahu fungsi JavaScript kedua memaparkan nilai yang disimpan pada halaman 1.

Ini ialah kod JavaScript saya:

<script type="text/javascript">

harga var; //Diisytiharkan di luar fungsi = pembolehubah global?

fungsi jimat_harga(){

    alert("started_1"); //Untuk rujukan sahaja

    harga = document.getElementById('the_id_of_the_textbox').value;

    alert(price); //untuk rujukan sahaja
}

<script type="text/javascript">

fungsi read_price(){

    makluman("mula_2");

    makluman(harga);

}

Pada "Halaman 1" saya mempunyai butang hantar:

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;</pra>
<p>Ia menghidupkan fungsi JavaScript dan mengubah hala saya ke halaman 2 saya dengan betul. </p>
<p>Tetapi pada halaman kedua: </p>
<pre class="brush:php;toolbar:false;">window.onload=read_price();

Saya sentiasa mendapat nilai "tidak ditentukan" untuk harga pembolehubah global.

Saya telah banyak membaca tentang pembolehubah global ini. Contohnya pada halaman ini: Masalah dengan pembolehubah global.. Tetapi saya tidak dapat membuatnya berfungsi...

Mengapa ini tidak berfungsi?

Answer 1

Pilihan terbaik anda di sini ialah menggunakan rentetan pertanyaan untuk "menghantar" nilai.

Bagaimana untuk mendapatkan nilai rentetan pertanyaan menggunakan JavaScript

• Jadi halaman 1 diubah hala ke page2.html?someValue=ABC
• Halaman 2 boleh membaca rentetan pertanyaan, khususnya kunci "someValue"

Jika ini lebih daripada sekadar latihan pembelajaran, anda mungkin ingin mempertimbangkan keselamatan melakukan ini.

Pembolehubah global tidak akan membantu anda di sini kerana ia akan dimusnahkan sebaik sahaja halaman dimuatkan semula.

Answer 2

Tanpa membaca kod anda, hanya senario anda, saya akan gunakan localStorage untuk menyelesaikannya. Berikut ialah contoh yang saya akan gunakan prompt() untuk memudahkan.

Di muka surat 1:

window.onload = function() {
   var getInput = prompt("嘿，在这里输入一些内容：");
   localStorage.setItem("storageName",getInput);
}

Di muka surat 2:

window.onload = alert(localStorage.getItem("storageName"));

Anda juga boleh menggunakan kuki, tetapi localStorage membenarkan lebih banyak ruang dan tidak menghantarnya kembali ke pelayan apabila halaman diminta.