Pelaksanaan JavaScript storan url dalam browser_Pengetahuan asas

Terdapat ciri yang sangat menarik dalam penyemak imbas semasa Anda boleh mengubah suai URL penyemak imbas tanpa menyegarkan halaman semasa proses menyemak imbas, anda boleh menyimpan sejarah penyemakan imbas dan klik Kembali apabila anda menekan butang, anda boleh menyemak imbas sejarah untuk mendapatkan maklumat rollback Ini tidak kedengaran rumit dan boleh dilaksanakan. Mari lihat bagaimana ia berfungsi.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History object pushState() Kaedah ini mempunyai 3 parameter, seperti yang anda boleh lihat daripada contoh di atas. Parameter pertama ialah objek Json, yang menyimpan sebarang maklumat sejarah tentang URL semasa Parameter kedua, tajuk, adalah bersamaan dengan menghantar tajuk dokumen, dan parameter ketiga digunakan untuk menghantar URL baharu bahawa bar alamat penyemak imbas berubah tetapi halaman semasa tidak dimuatkan semula.

Mari kita lihat contoh di mana kita akan menyimpan beberapa data sewenang-wenangnya dalam setiap URL individu.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
}

Jalankannya sekarang dan klik butang belakang penyemak imbas anda untuk melihat cara URL berubah. Untuk setiap perubahan URL, ia menyimpan keadaan sejarah "id" dan nilai yang sepadan. Tetapi bagaimana kita menawan semula keadaan sejarah dan melakukan sesuatu berdasarkannya? Kita perlu menambah pendengar acara pada "popstate", yang akan dicetuskan setiap kali keadaan objek sejarah berubah.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
 alert(i);
}
 
window.addEventListener('popstate', function(event) {
 readState(event.state);
});
 
function readState(data){
 alert(data.id);
}

Kini anda akan melihat bahawa setiap kali anda mengklik butang belakang, acara "popstate" akan dipecat. Pendengar acara kami kemudian mendapatkan semula URL yang dikaitkan dengan objek keadaan sejarah dan menggesa nilai "id".

Ia sangat mudah dan menyeronokkan, bukan?