Bagaimana untuk Meluluskan Pembolehubah Antara Halaman HTML dengan Selamat dengan JavaScript?

Melalui Pembolehubah Antara Halaman HTML dengan JavaScript

Dalam pembangunan web, selalunya perlu untuk memindahkan data antara dua halaman HTML. Satu pendekatan biasa ialah menggunakan JavaScript untuk menyimpan data dalam pembolehubah global dan mendapatkannya pada halaman kedua. Walau bagaimanapun, kaedah ini boleh menghadapi masalah jika pembolehubah global tidak diisytiharkan atau diakses dengan betul.

Pertimbangkan senario berikut:

• Anda mempunyai dua halaman, "halaman 1" dan "halaman 2".
• Pada halaman 1, kotak teks mengandungi nilai (cth., 100).
• Setelah mengklik butang, JavaScript menyimpan nilai kotak teks dalam pembolehubah global dan mengubah hala ke halaman 2.
• Pada halaman 2, fungsi onload cuba untuk mendapatkan dan memaparkan nilai yang disimpan pada halaman 1.

Walau bagaimanapun, fungsi onload sentiasa mengembalikan "tidak ditentukan" untuk pembolehubah global.

Penyelesaian Menggunakan Storan Setempat

Untuk menyelesaikan isu ini, pendekatan alternatif ialah menggunakan localStorage. Storan tempatan menyediakan cara yang lebih dipercayai dan selamat untuk menyimpan dan mendapatkan semula data.

• Pada halaman 1:

  Simpan nilai kotak teks dalam localStorage menggunakan kaedah setItem(), seperti berikut:

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

• Pada halaman 2:

  Dapatkan semula nilai yang disimpan daripada localStorage menggunakan getItem( ) dan paparkannya menggunakan alert(), seperti yang ditunjukkan di bawah:

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

Dengan menggunakan localStorage, anda boleh memastikan penyimpanan dan pengambilan data yang konsisten antara halaman HTML yang berbeza. Pendekatan ini boleh dipercayai dan cekap.

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