Bagaimana menjaga nilai setelah memuat ulang halaman dalam javascript

Saat Anda mengembangkan aplikasi seperti blog atau halaman yang datanya dapat berubah berdasarkan tindakan pengguna, Anda pasti ingin halaman tersebut sering disegarkan

Saat halaman disegarkan atau dimuat ulang, data baru apa pun akan ditampilkan berdasarkan interaksi pengguna tersebut. Kabar baik – Anda dapat menerapkan jenis fungsi ini dalam JavaScript dengan satu baris kode

Pada artikel ini, kita akan mempelajari cara memuat ulang halaman web dalam JavaScript, serta melihat beberapa situasi lain di mana kita mungkin ingin mengimplementasikan pemuatan ulang ini dan cara melakukannya

Inilah Scrim Interaktif tentang Cara Menyegarkan Halaman di JavaScript

Cara Menyegarkan Halaman di JavaScript Dengan location.reload()

Anda dapat menggunakan metode JavaScript location.reload()_ untuk memuat ulang URL saat ini. Metode ini berfungsi mirip dengan tombol Refresh browser

Metode reload()_ adalah metode utama yang bertanggung jawab untuk memuat ulang halaman. Di sisi lain, location adalah antarmuka yang mewakili lokasi sebenarnya (URL) dari objek yang ditautkan – dalam hal ini URL halaman yang ingin kita muat ulang. Itu dapat diakses melalui document.location atau

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Berikut ini adalah sintaks untuk memuat ulang halaman

window.location.reload();

Catatan. Ketika Anda membaca beberapa sumber tentang "memuat ulang halaman dalam JavaScript", Anda akan menemukan berbagai penjelasan yang menyatakan bahwa metode relaod menggunakan nilai boolean sebagai parameter dan bahwa

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Menurut Dokumentasi MDN, parameter boolean bukan bagian dari spesifikasi saat ini untuk location.reload() — dan sebenarnya tidak pernah menjadi bagian dari spesifikasi apa pun untuk location.reload() yang pernah dipublikasikan

Browser seperti Firefox, di sisi lain, mendukung penggunaan parameter boolean non-standar yang dikenal sebagai

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Selain dari Firefox, parameter apa pun yang Anda tentukan dalam panggilan location.reload() di browser lain akan diabaikan dan tidak berpengaruh

Cara Melakukan Muat Ulang/Segarkan Halaman di JavaScript Saat Tombol Diklik

Sejauh ini kita telah melihat cara kerja reload di JavaScript. Sekarang mari kita lihat bagaimana Anda dapat menerapkan ini ketika suatu peristiwa terjadi atau ketika tindakan seperti klik tombol terjadi

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Catatan. Cara kerjanya mirip dengan saat kita menggunakan

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Cara Menyegarkan/Memuat Ulang Halaman Secara Otomatis di JavaScript

Kami juga dapat mengizinkan penyegaran halaman setelah waktu yang ditentukan menggunakan metode

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

setTimeout(() => {
  document.location.reload();
}, 3000);

Menggunakan kode di atas halaman web kami akan dimuat ulang setiap 3 detik

Sejauh ini, kita telah melihat cara menggunakan metode muat ulang di file HTML kita saat kita melampirkannya ke acara tertentu, serta di file JavaScript kita

Cara Menyegarkan/Memuat Ulang Halaman Menggunakan Fungsi Riwayat di JavaScript

Fungsi History adalah metode lain untuk me-refresh halaman. Fungsi histori digunakan seperti biasa untuk menavigasi mundur atau maju dengan meneruskan nilai positif atau negatif

Misalnya, jika kita ingin kembali ke masa lalu, kita akan menggunakan

history.go(-1);

Ini akan memuat halaman dan membawa kita ke halaman sebelumnya yang kita navigasikan. Tetapi jika kita hanya ingin me-refresh halaman saat ini, kita dapat melakukannya dengan tidak memberikan parameter apa pun atau dengan mengirimkan

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

history.go();
history.go(0);

Catatan. Ini juga bekerja dengan cara yang sama seperti kita menambahkan metode reload() ke metode

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Membungkus

Pada artikel ini, kami belajar cara me-refresh halaman menggunakan JavaScript. Kami juga mengklarifikasi kesalahpahaman umum yang menyebabkan orang meneruskan parameter boolean ke metode reload()

Terima kasih sudah membaca

IKLAN

IKLAN

IKLAN

Joel Olawanle

Pengembang Frontend & Penulis Teknis

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara memuat ulang halaman saat ini tanpa kehilangan data formulir apa pun di JavaScript?

Bagaimana cara menyimpan nilai secara permanen di JavaScript?

Bagaimana cara menghindari variabel JavaScript disetel ulang saat penyegaran halaman?

Bagaimana Anda menyimpan nilai dalam JavaScript?