Apa itu riwayat jendela dalam javascript?

Question

Jika ada yang datang dari React-world, saya akhirnya menyelesaikan kasus penggunaan saya menggunakan kombinasi history-library, useEffect dan localStorage

Table of Contents Show

Poin yang perlu diingat
Apa itu jendela riwayat?
Bagaimana cara mendapatkan JavaScript riwayat jendela?
Apa sejarah dalam objek jendela?
Apa itu sejarah dalam JavaScript?

Ketika pengguna memilih proyek baru

  function selectProject(customer_id: string, project_id: string){
    const projectUrl = `/customer/${customer_id}/project/${project_id}`
    localStorage.setItem("selected-project", projectUrl)
    history.push(projectUrl)
  }

Ketika pengguna kembali dari situs web lain. Jika ada sesuatu di penyimpanan lokal, kirim dia ke sana

  useEffect(() => {
    const projectUrl = localStorage.getItem("selected-project")
    if (projectUrl) {
      history.push(projectUrl)
    }
  }, [history])

_

Saat pengguna keluar dari proyek, kosongkan localStorage

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }

Objek ini menunjukkan riwayat penelusuran web pengguna dalam bentuk larik yang terdiri dari URL yang dikunjungi pengguna. Objek ini digunakan untuk memuat halaman web, terlebih lagi, ini adalah properti dari objek jendela

Sintaksis
Ini memiliki sintaks berikut

jendela. sejarah

Atau,

sejarah

Objek sejarah terdiri dari properti dan metode tertentu yang menentukan fungsinya. Ini dijelaskan secara rinci di bawah ini

Properti
Objek sejarah JavaScript hanya terdiri dari satu properti yaitu sebagai berikut

panjangnya
Properti length dari objek history digunakan untuk mengambil jumlah halaman yang dikunjungi oleh pengguna dalam sesi browsing yang sedang berlangsung. Jika pengguna belum mengunjungi halaman web mana pun, properti ini akan mengembalikan 1, sesuai dengan halaman web saat ini

Sintaksis
Sintaks properti panjang disediakan di bawah ini

sejarah. panjang

Contoh
Misalkan Anda ingin mengambil jumlah halaman web yang Anda kunjungi di sesi penjelajahan saat ini

<. DOCTYPE html>
< html >
< tubuh >

< p > Total jumlah halaman web yang dikunjungi oleh pengguna. < /p >

< p id="tutorial"></p>

< skrip >
biarkan panjang = jendela. sejarah. panjangnya;
dokumen. getElementById("tutorial"). innerHTML = panjang;
< /skrip >

< /tubuh >
< /html >

Dalam contoh di atas, properti length dari objek history digunakan untuk mengekstraksi jumlah total URL yang dikunjungi di sesi saat ini

biarkan panjang = jendela. sejarah. panjang;
dokumen. getElementById ("tutorial") . innerHTML = panjang;

Keluaran

Menggunakan panjang properti, jumlah halaman web yang dikunjungi diambil

Metode
Objek sejarah JavaScript terdiri dari metode berikut

maju()
Ini digunakan untuk memuat halaman berikutnya (jika ada halaman berikutnya). Browser memanggil metode ini secara default saat pengguna mengklik tombol maju di browser, namun, kami juga dapat melakukannya secara manual

Sintaksis
Ini memiliki sintaks berikut

sejarah. maju ()

Contoh
Misalnya, Anda ingin mengunjungi halaman berikutnya dalam daftar histori menggunakan metode forward() dari objek histori

< klik tombol ="history. maju()"> Berikutnya < tombol >

Dalam contoh di atas, tombol dengan peristiwa klik sedang dibuat. Dengan mengkliknya, halaman berikutnya dalam riwayat penelusuran akan dimuat

kembali()
Ini digunakan untuk tujuan memuat halaman sebelumnya (jika ada halaman sebelumnya). Browser memanggil metode ini secara default saat pengguna mengklik tombol kembali di browser, namun kami juga dapat melakukannya secara manual

Sintaksis
Ini memiliki sintaks berikut

sejarah. kembali()

Contoh
Misalkan Anda ingin memuat halaman sebelumnya dalam daftar riwayat penelusuran menggunakan metode back() dari objek riwayat

< klik tombol ="history. kembali()"> tombol Kembali < tombol >

Dalam contoh di atas, tombol dengan peristiwa klik sedang dibuat. Dengan mengkliknya, halaman sebelumnya dalam daftar riwayat akan dimuat

Pergilah()
Ini digunakan untuk tujuan memuat halaman tertentu dalam daftar riwayat pencoklatan menggunakan nomor halaman

Sintaksis
Ini memiliki sintaks berikut

Contoh

Misalkan Anda ingin memuat halaman yang 3 halaman belakang maka gunakan kode berikut

< klik tombol ="history. go(-3)"> Pindahkan 3 halaman ke belakang button>

Dalam contoh di atas, sebuah tombol dengan peristiwa klik sedang dibuat, dan mengeklik tombol tersebut akan membawa Anda mundur 3 halaman

Poin yang perlu diingat

Untuk memuat ulang halaman saat ini, gunakan riwayat. pergi(0)
Tidak ada perbedaan antara sejarah. maju() dan sejarah. pergi(1)
Tidak ada perbedaan antara sejarah. kembali() dan sejarah. pergi(-1)

Kesimpulan

Objek riwayat (properti objek jendela) menunjukkan riwayat penjelajahan web pengguna dalam bentuk larik yang terdiri dari URL yang dikunjungi pengguna. Ini terdiri dari banyak properti dan metode seperti properti length digunakan untuk mengambil jumlah halaman web yang dikunjungi oleh pengguna, metode forward() digunakan untuk memuat halaman berikutnya, metode back() digunakan untuk memuat halaman sebelumnya dan pergi . Properti dan metode ini disorot dalam artikel ini bersama dengan contoh yang sesuai

Apa itu jendela riwayat?

Properti histori dari objek Window merujuk ke objek History. Ini berisi riwayat sesi browser, daftar semua halaman yang dikunjungi dalam bingkai atau jendela saat ini . Karena Window adalah objek global dan berada di bagian atas rantai cakupan, maka properti objek Window i. e. jendela.

Bagaimana cara mendapatkan JavaScript riwayat jendela?

Riwayat Jendela JavaScript .

sejarah. back() - sama seperti mengklik kembali di browser

sejarah. maju() - sama seperti mengklik maju di browser

Apa sejarah dalam objek jendela?

Objek Riwayat Jendela . Objek sejarah adalah properti dari objek jendela. contains the URLs visited by the user (in the browser window). The history object is a property of the window object.

Apa itu sejarah dalam JavaScript?

Objek riwayat JavaScript mewakili larik URL yang dikunjungi oleh pengguna . Dengan menggunakan objek ini, Anda dapat memuat halaman sebelumnya, maju atau tertentu. Objek sejarah adalah properti jendela, sehingga dapat diakses oleh. jendela. sejarah.

kode javascript