Bagaimanakah Saya Boleh Mengekalkan Keadaan URL Apabila Mengubah Halaman dengan JavaScript?

Memelihara Keadaan URL Semasa Mengubah Suai Halaman dengan JavaScript

Dalam JavaScript, mengubah URL penyemak imbas tanpa mencetuskan muat semula halaman penuh boleh dicapai dengan memanfaatkan API sejarah penyemak imbas atau, sebagai alternatif, pengecam serpihan kaedah.

Menggunakan History API (Pelayar Moden)

Untuk penyemak imbas yang menyokong API sejarah, anda boleh menggunakan history.pushState untuk mengemas kini URL tanpa menjejaskan kandungan halaman :

history.pushState({}, '', 'new-url');

Untuk memulihkan URL asal apabila pengguna mengklik butang kembali, gunakan history.popState:

window.addEventListener('popstate', function() {
  // Restore original URL and content
});

Menggunakan Kaedah Pengecam Fragmen (Pelayar Warisan)

Dalam penyemak imbas yang tidak mempunyai sokongan untuk API sejarah, anda boleh menggunakan tetingkap. location.hash property untuk menyimpan maklumat keadaan dalam serpihan URL:

window.location.hash = '#state-information';

Untuk mengendalikan perubahan keadaan, dengarkan peristiwa hashchange atau semak nilai cincang secara berkala menggunakan setInterval:

window.addEventListener('hashchange', function() {
  // Update page based on new hash
});

Pertimbangan

• Elakkan konflik dengan ID elemen apabila menggunakan kaedah pengecam serpihan.
• Pastikan bahawa maklumat negeri dikodkan dengan sewajarnya untuk dimasukkan ke dalam URL.
• Jika menggunakan jQuery, pemalam hashchange boleh memudahkan pengurusan keadaan berasaskan cincang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Keadaan URL Apabila Mengubah Halaman dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!