API Sejarah HTML5 membolehkan memanipulasi sejarah penyemak imbas dan menukar URL tanpa memuatkan semula halaman. Ia sesuai untuk aplikasi halaman tunggal (SPA) untuk melaksanakan fungsi navigasi dan penanda buku apabila bertukar kandungan dinamik. 1. Gunakan sejarah.pushstate () untuk menambah penyertaan baru ke timbunan sejarah. Parameter termasuk objek status, tajuk (biasanya diabaikan) dan URL baru, seperti sejarah.pushstate ({halaman: 'home'}, '', '/home'); 2. Jika anda perlu mengemas kini entri sejarah semasa dan bukannya menambahkannya, gunakan sejarah.replaceState (), yang sama dengan pushstate; 3. Apabila pengguna mengklik butang ke hadapan/belakang, logik navigasi boleh dikendalikan dengan mendengar acara Window.onpopstate, dan Event.State mengandungi data status yang diluluskan sebelumnya. API ini sering digunakan untuk membina laman web atau spa yang dimuatkan secara asynchronously, URL mencerminkan status aplikasi dan sokongan tingkah laku navigasi yang diharapkan. Ia sering digunakan bersempena dengan perpustakaan penghalaan depan seperti Router React, tetapi logik pemuatan kandungan selepas perubahan URL diperlukan.

Menggunakan API Sejarah HTML5 membolehkan anda memanipulasi sejarah penyemak imbas dan menukar URL tanpa memuat semula halaman. Ini amat berguna untuk aplikasi satu halaman (SPA) di mana kandungan berubah secara dinamik tetapi anda masih mahu navigasi URL yang betul dan penanda buku.

Tolak Negeri Baru ke Sejarah

Kaedah yang paling biasa digunakan ialah history.pushState() . Ia membolehkan anda menambah entri baru ke timbunan sejarah sesi penyemak imbas.

• Parameter :
  pushState(state, title, url)
  • state : Objek yang berkaitan dengan entri sejarah baru (boleh menjadi null )
  • title : Secara sejarah dimaksudkan untuk tajuk dokumen, tetapi kebanyakan pelayar mengabaikan ini
  • url : URL baru muncul di bar alamat (relatif atau mutlak)

Contoh:

 history.pushstate ({page: 'home'}, '', '/home');

Selepas menjalankan ini, URL berubah ke /home , tetapi halaman tidak dimuat semula. Anda boleh menggunakannya untuk mensimulasikan navigasi di SPA.

Ganti keadaan semasa

Jika anda tidak mahu membuat entri sejarah baru tetapi sebaliknya mengemas kini yang terkini, gunakan history.replaceState() .

Ia berfungsi seperti pushState() , tetapi menggantikan entri sejarah semasa dan bukannya menambah yang baru.

Ini berguna apabila anda ingin mengemas kini URL selepas beberapa interaksi pengguna tanpa membuat langkah tambahan/ke hadapan.

Contoh:

 history.ReplaceState ({page: 'profile'}, '', '/user/profile');

Ini menyimpan pengguna pada halaman logik yang sama tetapi mengemas kini URL dan keadaan.

Menjawab Navigasi Back/Forward

Apabila pengguna mengklik butang belakang atau ke hadapan, aplikasi anda harus bertindak balas dengan sewajarnya. Di sinilah acara popstate masuk.

• Lampirkan pendengar ke window.onpopstate :

   window.addeventListener ('popstate', fungsi (event) {
  // Mengendalikan navigasi di sini berdasarkan event.state
  });

  Ambil perhatian bahawa event.state mengandungi objek Negeri yang anda lulus ke pushState() atau replaceState() .

  Perlu diingat bahawa tidak semua penyemak imbas membakar popstate pada beban halaman awal, jadi anda mungkin perlu menyemak history.state secara berasingan.

  Bila Menggunakannya

  Anda biasanya akan mencapai API Sejarah ketika membina laman web atau spa yang dinamik di mana:

  • Beban kandungan tanpa menyegarkan halaman penuh
  • URL perlu mencerminkan keadaan aplikasi semasa
  • Pengguna mengharapkan butang Back/Forward berfungsi seperti yang diharapkan

  Ia berpasangan dengan perpustakaan penghalaan sisi pelanggan seperti Router React atau Vue Router, yang secara dalaman menggunakan API ini.

  Tetapi ingat: Menukar URL tidak akan secara automatik mengambil kandungan baru - bahagian itu terpulang kepada anda untuk dilaksanakan.

  Pada dasarnya itu sahaja.

  Atas ialah kandungan terperinci Bagaimana cara menggunakan API Sejarah HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!