Latihan 2: Local Storage — JavaScript

Latihan 2 dari materi Local Storage di JavaScript — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tombol dan <p id="counter">0</p> sudah ada. Bikin penghitung klik yang tetap ingat angkanya setelah halaman di-refresh:

Begitu halaman dibuka, baca angka tersimpan pakai localStorage.getItem (kalau belum ada, pakai 0), ubah jadi angka dengan Number(...), lalu tampilkan di #counter lewat textContent. Tulis langkah ini sebelum addEventListener.
Tiap tombol diklik: tambah 1, simpan angkanya pakai localStorage.setItem, lalu tampilkan di #counter.

Yang dicek: sebelum ada klik, #counter berisi 0. Sesudah dua klik, isinya 2. Nama key-nya bebas, misalnya klik.

Hint

Ada dua waktu: waktu halaman dibuka (baca lalu tampilkan) dan waktu tombol diklik (tambah, simpan, tampilkan).
Baca pakai Number(localStorage.getItem("klik") || 0) dan tampilkan pakai counter.textContent sebelum addEventListener. Di dalam listener, simpan pakai localStorage.setItem.
let count = Number(localStorage.getItem("klik") || 0); counter.textContent = count; tombol.addEventListener("click", () => { count = count + 1; localStorage.setItem("klik", count); counter.textContent = count; });

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Local Storage — JavaScript

Hint

Memperbarui Aplikasi