Bagaimanakah Saya Boleh Menyimpan Pembolehubah JavaScript Selepas Muat Semula Halaman?

Memelihara Pembolehubah JavaScript Di Luar Penyegaran Halaman

Dalam JavaScript, anda boleh mengubah suai pembolehubah secara dinamik melalui klik butang atau acara lain. Walau bagaimanapun, secara lalai, perubahan ini hilang apabila halaman dimuat semula. Bagaimanakah kita boleh memastikan pembolehubah mengekalkan nilainya walaupun selepas memuat semula halaman?

Storan Setempat dan Sesi

Storan berterusan dalam JavaScript dicapai melalui dua kaedah: window.localStorage dan tetingkap.sessionStorage. Kedua-duanya menyediakan cara untuk menyimpan pasangan nilai kunci, dengan perbezaan yang ketara:

• localStorage: Data kekal selama-lamanya merentas sesi penyemak imbas dan dimulakan semula.
• sessionStorage: Data kekal hanya semasa sesi penyemak imbas semasa dan dikosongkan sebaik sahaja tetingkap atau tab dibuka ditutup.

Menyimpan Data:

Untuk menyimpan pembolehubah dalam storan berterusan, gunakan setItem() dengan kunci dan nilai yang dikehendaki:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Mendapatkan Data:

Selepas muat semula halaman, dapatkan semula data yang disimpan menggunakan getItem():

var someVarName = localStorage.getItem("someVarKey");

Ini akan memberikan nilai yang disimpan kepada someVarName, walaupun selepas halaman telah dimuat semula.

Mengatasi Had:

Storan setempat dan sesi hanya menyokong nilai rentetan. Untuk menyimpan jenis data yang lebih kompleks, pertimbangkan untuk menggunakan JSON:

var obj = {
  prop1: "value1",
  prop2: "value2"
};

localStorage.setItem("objKey", JSON.stringify(obj));

Dapatkan dan hurai data kemudian:

var obj = JSON.parse(localStorage.getItem("objKey"));

Sumber Tambahan:

• Storan Pelayar: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• LocalStorage: https://developer.mozilla.org/en-US/docs/DOM /Storage#localStorage

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Pembolehubah JavaScript Selepas Muat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!