localStorage adalah tempat penyimpanan kecil di browser. Data yang kamu simpan di situ tetap ada walau halamannya di-refresh, tab-nya ditutup, atau browser-nya baru dibuka lagi besok. Cocok buat hal kecil, misalnya pilihan tema atau jumlah klik.
🧪 Tebakan cepat: kamu simpan angka
17ke localStorage, lalu baca lagi. Yang balik angka17atau teks"17"? Tebak dulu, jawabannya ada di bagian "Simpan dan baca dengansetItemdangetItem".
Simpan dan baca dengan setItem dan getItem
localStorage.setItem('age', 17)
const age = localStorage.getItem('age')
console.log(typeof age, age) // string 17
localStorage.setItem('age', 17)menyimpan nilai17dengan nama'age'. Nama ini disebut key, kayak label di laci: nanti isinya kamu ambil pakai label yang sama.localStorage.getItem('age')membaca isi laci'age'dan mengembalikannya.typeof ageadalahstring. localStorage cuma menyimpan teks, jadi angka17balik sebagai teks"17". Itu jawaban tebakan.
Kalau key-nya belum pernah disimpan, getItem mengembalikan null. Jadi localStorage.getItem('tidakAda') hasilnya null.
Buat menghapus, localStorage.removeItem('age') menghapus satu key, dan localStorage.clear() menghapus semuanya.
Angka yang bertahan setelah refresh
Pola yang paling sering dipakai: baca angka tersimpan begitu halaman dibuka, tampilkan, lalu simpan lagi tiap ada klik.
const tombol = document.querySelector('button')
const teks = document.querySelector('#suka')
let suka = Number(localStorage.getItem('suka') || 0)
teks.textContent = suka
tombol.addEventListener('click', () => {
suka = suka + 1
localStorage.setItem('suka', suka)
teks.textContent = suka
})
localStorage.getItem('suka') || 0: waktu pertama kali, key-nya belum ada (null), jadi pakai0.Number(...)mengubah teks'3'jadi angka3. Tanpa itu,'3' + 1malah menyambung teks jadi'31'.teks.textContent = sukaditulis sebelumaddEventListener, jadi angka tersimpan langsung tampil waktu halaman dibuka, bukan baru sesudah klik pertama.- Di dalam listener: tambah 1, simpan lagi pakai
setItem, lalu tampilkan. localStorage gak ikut berubah sendiri waktu variabelnya berubah, jadisetItemdipanggil tiap kali.
Refresh halamannya, angkanya lanjut dari yang terakhir, gak balik ke 0.
Object disimpan sebagai JSON
const user = { name: 'Budi', level: 3 }
localStorage.setItem('user', JSON.stringify(user))
const saved = JSON.parse(localStorage.getItem('user'))
console.log(saved.name) // Budi
Tanpa JSON.stringify, object disimpan sebagai teks '[object Object]' dan isinya hilang. Simpan pakai JSON.stringify, baca lagi pakai JSON.parse.
⚠️ Jebakan yang sering ketemu
- Data rahasia di localStorage. Semua script di halaman itu bisa membacanya, jadi jangan simpan password atau token login di sini.
- Mengira data ikut ke perangkat lain. localStorage cuma ada di browser itu, untuk situs itu. Buka di HP atau browser lain, isinya kosong.
JSON.parsepada key yang gak ada.JSON.parse(null)memang menghasilkannull, tapisaved.namesesudahnya bikin error. Cek dulu hasilnya sebelum dibaca.
💡 Kembarannya:
sessionStorage. Method-nya sama persis (setItem,getItem,removeItem,clear), bedanya isinya hilang waktu tab ditutup. Cocok buat isian form yang belum selesai.
TL;DR: localStorage.setItem(key, nilai) menyimpan, localStorage.getItem(key) membaca, dan key yang gak ada menghasilkan null. Isinya selalu teks, jadi angka dibaca lagi pakai Number(...), dan object disimpan lewat JSON.stringify lalu dibaca lewat JSON.parse. Baca dan tampilkan data tersimpan waktu halaman dibuka, lalu panggil setItem lagi tiap nilainya berubah. Jangan simpan data rahasia di sini.
