Bagaimana untuk Melepasi Pembolehubah antara Halaman HTML menggunakan JavaScript dengan Berkesan?

Melalui Pembolehubah melalui JavaScript dari Satu Halaman HTML ke Halaman Lain

Masalah:

Anda perlu menghantar pembolehubah antara dua Halaman HTML menggunakan JavaScript. Nilai pembolehubah ditangkap dalam kotak teks pada halaman pertama dan anda mahu mengakses nilai tersebut pada halaman kedua selepas pengguna mengklik butang. Walau bagaimanapun, anda menghadapi nilai "tidak ditentukan" apabila cuba mendapatkan semula pembolehubah pada halaman kedua.

Penyelesaian:

Menggunakan localStorage:

Daripada menggunakan pembolehubah global, yang mungkin tidak boleh dipercayai dan sukar untuk diurus, anda boleh menggunakan localStorage untuk mencapai fungsi ini. localStorage ialah API penyemak imbas yang menyediakan cara untuk menyimpan data secara setempat dalam penyemak imbas, walaupun selepas menutup apl atau tab penyemak imbas. Ia mempunyai had storan yang besar berbanding kuki.

Pelaksanaan:

1. Di Halaman 1 (Simpan Pembolehubah):

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

2. Di Halaman 2 (Mendapatkan Pembolehubah):

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

Penjelasan:

• Pada Halaman 1, anda menggunakan localStorage.setItem("storageName", getInput) untuk menyimpan nilai yang dimasukkan dalam kotak teks dalam kekunci storageName localStorage.
• Hidup Halaman 2, anda menggunakan localStorage.getItem("storageName") untuk mendapatkan semula nilai yang disimpan dalam kekunci storageName dan memaparkannya dalam kotak amaran.

Pendekatan Alternatif:

• Kuki: Anda juga boleh menggunakan kuki untuk melepasi pembolehubah, tetapi kuki tersebut mempunyai had storan yang lebih kecil dan dihantar semula ke pelayan dengan setiap permintaan, yang mungkin menjejaskan prestasi dan privasi.
• Storan Sesi: Storan sesi adalah serupa dengan localStorage tetapi hanya bertahan untuk sesi semasa dan dikosongkan apabila pengguna menutup tab penyemak imbas mereka. Ia boleh digunakan jika anda hanya perlu menyimpan data untuk sesi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Melepasi Pembolehubah antara Halaman HTML menggunakan JavaScript dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!