Bagaimana untuk Mengekalkan Keadaan Menu Merentasi Muat Semula Halaman Menggunakan LocalStorage atau Storan Sebelah Pelayan?

Mengekalkan Keadaan Menu Merentas Muat Semula Halaman

Dalam coretan kod yang anda berikan, anda ingin mengekalkan keadaan menu, terutamanya untuk "Pautan 1," merentas muat semula halaman sehingga satu lagi item menu diklik atau halaman lain dimuatkan. Untuk menangani keperluan ini, pertimbangkan untuk melaksanakan penyelesaian berikut:

Gunakan LocalStorage

Pendekatan yang berdaya maju ialah menggunakan localStorage API, yang menyediakan cara untuk menyimpan data secara berterusan dalam penyemak imbas pengguna. Data yang disimpan akan kekal utuh walaupun selepas muat semula halaman dan sesi penyemak imbas.

Pelaksanaan

1. Keadaan Menu Simpan dalam LocalStorage:
Apabila memulakan halaman, semak sama ada terdapat entri bernama 'menuState' disimpan dalam localStorage. Jika wujud, gunakan keadaan menu yang disimpan dengan menukar "Pautan 1" sewajarnya.

2. Kemas Kini Keadaan Menu pada Interaksi Pengguna:
Apabila "Pautan 1" diklik, kemas kini pembolehubah localStorage 'menuState' untuk menggambarkan keadaan yang diubah. Ini memastikan keadaan dikekalkan merentas muat semula halaman.

Berikut ialah contoh pelaksanaan:

<code class="javascript">// Initialize page
$(function () {
  // Check for stored menu state
  const menuState = localStorage.getItem('menuState');
  // Apply stored state if it exists
  if (menuState) {
    applyMenuState(menuState);
  }
});

// Handle link click
$('nav ul li a').click(function () {
  // Update menu state
  const linkId = $(this).attr('href'); // Extract link ID
  const menuState = { id: linkId, transform: 'translateX(1.5em)' }; // Create menu state object
  localStorage.setItem('menuState', JSON.stringify(menuState)); // Store state in localStorage
});

// Function to apply menu state
function applyMenuState(state) {
  $(state.id).css('transform', state.transform); // Set link transformation
}</code>

Kebaikan dan Keburukan

Menyimpan Negeri Secara Setempat ( Pelayar)

• Kebaikan:

  • Tiada overhed sebelah pelayan
  • Pelaksanaan mudah

• Keburukan:

  • Boleh diakses oleh pengguna, jadi mereka berpotensi mengganggu keadaan
  • Data dikosongkan jika penyemak imbas data dipadamkan

Menyimpan Bahagian Pelayan Negeri

• Kebaikan:

  • Selamat daripada gangguan pengguna
  • Boleh digunakan untuk penyesuaian dan pilihan pengguna

• Keburukan:

  • Memerlukan pelaksanaan dan persediaan bahagian pelayan
  • Boleh memperkenalkan kependaman jika pelayan lambat bertindak balas

Pilihan lokasi storan bergantung pada keperluan khusus anda dan kekangan. Pertimbangkan keselamatan dan potensi gangguan pengguna jika menyimpan negeri secara tempatan. Jika penyesuaian dan pemperibadian pengguna adalah penting, storan sebelah pelayan ialah pilihan yang berdaya maju.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Keadaan Menu Merentasi Muat Semula Halaman Menggunakan LocalStorage atau Storan Sebelah Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!