Cara Berkongsi Data Antara Halaman HTML dalam JavaScript: Memindahkan Pembolehubah dengan window.onload dan localStorage

Memindahkan Pembolehubah Antara Halaman HTML dalam JavaScript

Dalam senario yang melibatkan berbilang halaman HTML, keperluan sering timbul untuk memindahkan pembolehubah dari satu halaman ke halaman lain . Untuk menangani cabaran ini, artikel ini akan meneroka dua kaedah: window.onload dan localStorage, menyediakan penyelesaian komprehensif untuk berkongsi data antara halaman.

Latar Belakang

Kod yang disediakan termasuk dua fungsi: save_price() dan read_price(), dengan matlamat untuk menyimpan dan mendapatkan semula nilai input pengguna dalam pembolehubah global. Walau bagaimanapun, masalah timbul apabila menggunakan harga berubah global pada halaman 2, di mana ia mengembalikan "tidak ditentukan" kerana kekurangan skop global dalam JavaScript.

Penyelesaian Menggunakan window.onload

Kesukaran menggunakan window.onload ialah percubaan panggilan fungsi tidak betul. Format yang betul hendaklah:

window.onload = function() {
  read_price();
};

Penyelesaian ini, walaupun berfungsi, mempunyai had tertentu. Pembolehubah global boleh mencipta cabaran dalam penyelenggaraan dan kebolehbacaan kod, terutamanya dalam aplikasi yang lebih besar.

Penyelesaian Alternatif Menggunakan localStorage

localStorage menawarkan pendekatan yang lebih selamat dan cekap untuk pemindahan data antara halaman tanpa memerlukan pembolehubah global. Mekanisme ini membenarkan penyimpanan pasangan nilai kunci yang berterusan merentas muat semula halaman dan sesi penyemak imbas.

Pelaksanaan Kod

Halaman 1:

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

Halaman 2:

window.onload = function() {
  alert(localStorage.getItem("value"));
};

Faedah LocalStorage

• Storan Berterusan: Data kekal boleh diakses walaupun selepas menutup dan membuka semula penyemak imbas.
• Kapasiti Storan Besar: Membolehkan untuk menyimpan sejumlah besar data, tidak seperti kuki.
• Pengelakan Sebelah Pelayan: Tidak seperti kuki, data tidak dihantar semula ke pelayan dengan setiap permintaan.

Kesimpulan

Kedua-dua tetingkap.onload dan localStorage menyediakan kaedah untuk memindahkan pembolehubah antara halaman, dengan localStorage muncul sebagai penyelesaian pilihan kerana manfaatnya yang luas dan kemudahan penggunaan. Dengan memanfaatkan kuasa localStorage, pembangun boleh berkongsi data dengan cekap merentas halaman, meningkatkan pengalaman pengguna dan memperkemas proses pembangunan.

Atas ialah kandungan terperinci Cara Berkongsi Data Antara Halaman HTML dalam JavaScript: Memindahkan Pembolehubah dengan window.onload dan localStorage. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!