Bagaimana untuk Mengekalkan Keadaan Menu pada Muat Semula Halaman menggunakan Penyemak Imbas Moden?

Keadaan Menu Berterusan pada Muat Semula Halaman

Pernyataan Masalah:

Anda mempunyai menu dengan berbilang pautan, di mana:

• Pada tuding, pautan yang dipilih menterjemahkan 1.5em ke kanan.
• Apabila klik, pautan yang diklik kekal dalam kedudukan diterjemahkan, walaupun selepas halaman dimuat semula, sehingga pautan lain dipilih.

Penyelesaian: Memanfaatkan localStorage

Untuk mencapai gelagat menu yang diingini, kami boleh menggunakan HTML5 localStorage untuk menyimpan dan mendapatkan semula keadaan pautan yang dipilih. Berikut ialah panduan langkah demi langkah:

1. Buat Pembolehubah Storan setempat: Cipta pembolehubah untuk menyimpan ID atau kelas pautan yang dipilih. Contohnya:

<code class="js">const selectedLinkId = localStorage.getItem('selectedLinkId');</code>

2. Kemas kini Menu pada Muatan Halaman: Pada pemuatan halaman, semak sama ada pembolehubahLinkId yang dipilih wujud. Jika ya, pilih pautan yang sepadan dan gunakan kedudukan yang diterjemahkan:

<code class="js">if (selectedLinkId) {
  $(`#${selectedLinkId}`).addClass('hovered').siblings().removeClass('hovered');
}</code>

3. Simpan Keadaan Menu pada Klik Pautan: Apabila pautan diklik, simpan ID atau kelas pautan yang diklik ke pembolehubah localStorage:

<code class="js">$('#menuLinks').on('click', function() {
  localStorage.setItem('selectedLinkId', $(this).attr('id'));
});</code>

4. Pembersihan pada Perubahan Halaman: Jika anda ingin menetapkan semula keadaan menu apabila halaman lain dimuatkan, tambahkan pendengar acara pada acara pageshow dan kosongkan pembolehubah localStorage:

<code class="js">window.addEventListener('pageshow', function() {
  localStorage.removeItem('selectedLinkId');
});</code>

Kebaikan dan Keburukan Lokasi Storan:

• localStorage:

  • Kebaikan: Berterusan merentas sesi dan tab penyemak imbas, boleh diakses oleh JavaScript.
  • Keburukan : Kapasiti storan terhad, pengguna boleh memadam data secara manual.

• Sisi pelayan:

  • Kebaikan: Kapasiti storan tanpa had, lebih selamat.
  • Keburukan: Memerlukan persediaan tambahan dan pengambilan semula adalah lebih kompleks.

Akhirnya, lokasi storan terbaik bergantung pada keperluan khusus anda. localStorage ialah pilihan yang sesuai untuk tetapan pengguna berterusan yang tidak memerlukan jumlah storan yang besar.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Keadaan Menu pada Muat Semula Halaman menggunakan Penyemak Imbas Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!