localStorage JavaScript adalah tempat penyimpanan bawaan browser yang menyimpan data dalam bentuk pasangan key/value dan bertahan meski kamu menutup tab, menutup browser, bahkan me-restart komputer. Berkat localStorage, sebuah website bisa “mengingat” preferensi kamu, misalnya mode gelap yang sudah kamu pilih, isi keranjang belanja, atau nama yang pernah kamu ketik, tanpa perlu database di server. Semuanya tersimpan langsung di browser pengguna dan bisa dibaca kembali kapan saja lewat JavaScript.

Di panduan ini kamu akan belajar localStorage dari nol: apa itu localStorage dan bagaimana ia bekerja, empat method utamanya (setItem, getItem, removeItem, clear), kenapa ia hanya bisa menyimpan teks sehingga objek harus lewat JSON.stringify dulu, bedanya dengan sessionStorage dan cookie, sampai aturan keamanan penting yang wajib kamu tahu. Ada juga playground interaktif supaya kamu bisa mencoba menyimpan dan mengambil data langsung tanpa menyentuh kode.

Apa Itu localStorage?

localStorage adalah sebuah “lemari penyimpanan” kecil di dalam browser tempat kamu bisa menaruh data berupa pasangan key dan value. Setiap website (lebih tepatnya setiap origin, kombinasi protokol, domain, dan port) punya lemari sendiri yang terpisah dari website lain, dan datanya tetap ada sampai kamu atau pengguna menghapusnya secara sengaja.

Analogi paling gampang: bayangkan localStorage seperti buku catatan tempel di kulkas. Kamu menuliskan catatan dengan sebuah label (key) dan isinya (value), lalu menempelkannya. Besok saat kamu buka kulkas lagi, catatan itu masih ada persis seperti kemarin. Itulah sifat persisten localStorage, datanya bertahan lintas waktu dan lintas tab.

Cara memakainya sangat sederhana:

// Menyimpan sebuah nilai
localStorage.setItem('nama', 'Budi')

// Mengambilnya kembali, kapan saja, bahkan setelah restart
const nama = localStorage.getItem('nama')
console.log(nama)  // "Budi"

Yang menarik, kalau kamu menutup tab lalu membuka website yang sama besok, baris getItem di atas tetap menghasilkan "Budi". Inilah yang membedakan localStorage dari sekadar variabel biasa di JavaScript, variabel biasa hilang begitu halaman di-reload, sedangkan localStorage bertahan.

Empat Method Utama localStorage

Seluruh interaksi dengan localStorage hanya butuh empat method. Kalau kamu hafal keempat ini, kamu sudah menguasai 95% penggunaan sehari-hari.

setItem(key, value), menyimpan sebuah value dengan key tertentu. Kalau key-nya sudah ada, nilainya ditimpa.
getItem(key), mengambil value berdasarkan key. Kalau key tidak ada, ia mengembalikan null.
removeItem(key), menghapus satu pasangan key/value tertentu.
clear(), menghapus semua data localStorage untuk origin ini sekaligus.

Berikut keempatnya dalam satu contoh utuh:

// Simpan beberapa data
localStorage.setItem('nama', 'Budi')
localStorage.setItem('theme', 'dark')

// Ambil satu data
console.log(localStorage.getItem('theme'))  // "dark"

// Ambil key yang tidak ada
console.log(localStorage.getItem('umur'))   // null

// Hapus satu data
localStorage.removeItem('nama')

// Hapus semua data
localStorage.clear()

Coba Sendiri: Playground localStorage

Teori saja tidak cukup, coba sendiri di bawah ini. Ketik sebuah key dan value, lalu klik setItem untuk menyimpannya, getItem untuk mengambilnya, removeItem untuk menghapus satu, atau clear untuk mengosongkan semua. Perhatikan tabel isi localStorage yang ikut berubah, dan coba juga tombol “Simpan objek?” untuk melihat apa yang terjadi kalau objek disimpan tanpa JSON.stringify:

Coba Sendiri

key

value

Isi localStorage sekarang

key	value
nama	Budi

hasil getItem—

localStorage.setItem('nama', 'Budi')

Kalau kamu ingin latihan yang lebih terstruktur dengan penjelasan bertahap, ada pelajaran localStorage interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup apa pun.

localStorage Hanya Menyimpan Teks (String)

Ini bagian terpenting yang wajib kamu pahami: localStorage hanya bisa menyimpan string. Kamu tidak bisa menyimpan objek atau array secara langsung. Kalau kamu memaksa menyimpannya, JavaScript akan diam-diam mengubahnya menjadi teks, dan hasilnya bukan yang kamu harapkan:

const user = { nama: 'Budi', theme: 'dark' }

localStorage.setItem('user', user)          // salah!
console.log(localStorage.getItem('user'))   // "[object Object]", datanya hilang!

Objek user tadi berubah menjadi teks tak berguna [object Object], dan semua propertinya lenyap. Solusinya adalah mengubah objek menjadi string JSON dulu saat menyimpan, lalu mengubahnya kembali menjadi objek saat mengambil, persis di sinilah JSON.stringify dan JSON.parse berperan:

const user = { nama: 'Budi', theme: 'dark' }

// Simpan: objek → teks JSON dengan JSON.stringify
localStorage.setItem('user', JSON.stringify(user))

// Ambil: teks JSON → objek dengan JSON.parse
const kembali = JSON.parse(localStorage.getItem('user'))
console.log(kembali.theme)  // "dark", utuh kembali!

Kalau kamu masih belum akrab dengan kedua fungsi ini, baca dulu penjelasan lengkap tentang JSON yang membahas JSON.stringify dan JSON.parse beserta aturan formatnya, keduanya berpasangan erat dengan localStorage.

Ketiganya sama-sama menyimpan data di sisi browser, tapi cara kerja dan tujuannya berbeda. Memilih yang tepat penting supaya aplikasimu berperilaku benar dan aman. Berikut perbandingannya:

Aspek	localStorage	sessionStorage	cookie
Umur data	Sampai dihapus manual	Sampai tab ditutup	Sesuai tanggal kedaluwarsa
Kapasitas	Sekitar 5 MB	Sekitar 5 MB	Sekitar 4 KB saja
Dikirim ke server?	Tidak	Tidak	Ya, di setiap request
Cocok untuk	Preferensi jangka panjang (tema, draft)	Data sementara satu sesi	Autentikasi & data yang server butuh

Poin yang paling sering terlewat: cookie ikut terkirim ke server di setiap permintaan HTTP, sedangkan localStorage dan sessionStorage murni tinggal di browser dan tidak pernah otomatis dikirim ke mana pun. Karena itu cookie cocok untuk hal seperti token sesi yang memang perlu dibaca server, sementara localStorage cocok untuk data yang cukup dipakai di sisi browser saja. Kapasitas cookie juga jauh lebih kecil (sekitar 4 KB), jadi jangan pakai cookie untuk menyimpan data besar.

Kapan Sebaiknya Memakai localStorage?

localStorage bersinar untuk data yang perlu diingat antar kunjungan tapi tidak sensitif dan tidak perlu diproses server. Contoh nyata:

Preferensi tema, menyimpan pilihan mode gelap/terang supaya website langsung tampil sesuai selera pengguna saat dibuka lagi.
Draft atau input yang belum dikirim, menyimpan tulisan di form supaya tidak hilang kalau halaman tak sengaja tertutup.
Keranjang belanja sederhana, menyimpan daftar barang sebelum checkout.
Flag “sudah pernah lihat”, misalnya menandai bahwa pengguna sudah menutup banner pengumuman agar tidak muncul lagi.

Karena localStorage hanya bisa diakses lewat JavaScript, sering kali kamu memakainya bersamaan dengan manipulasi halaman. Kalau kamu ingin, misalnya, membaca tema dari localStorage lalu mengubah tampilan halaman sesuai nilai itu, kamu perlu memahami cara kerja DOM untuk mengubah elemen, dan biasanya dipicu oleh sebuah event JavaScript seperti klik tombol toggle. Ketiga konsep ini, localStorage, DOM, dan event, sering bekerja sama dalam fitur nyata.

Aturan Keamanan: Jangan Simpan Rahasia

Ada satu aturan keamanan yang tidak boleh kamu langgar: jangan pernah menyimpan data rahasia di localStorage. Yang dimaksud rahasia di sini adalah password, token autentikasi, kunci API, nomor kartu, atau apa pun yang kalau bocor bisa membahayakan pengguna.

Alasannya sederhana namun serius: localStorage bisa dibaca oleh JavaScript apa pun yang berjalan di halaman itu. Kalau situsmu terkena serangan XSS (Cross-Site Scripting), di mana penyerang berhasil menyisipkan script jahat, script itu bisa membaca seluruh isi localStorage dan mengirimnya ke server penyerang. Berbeda dengan cookie yang bisa ditandai HttpOnly agar tidak terjangkau JavaScript, localStorage tidak punya perlindungan semacam itu; ia selalu terbuka untuk dibaca skrip.

Batasan Lain yang Perlu Diingat

Selain soal string dan keamanan, ada beberapa batasan localStorage yang baik untuk kamu ketahui sejak awal:

Kapasitas sekitar 5 MB per origin. Cukup besar untuk teks preferensi, tapi bukan tempat untuk menyimpan gambar atau file besar. Kalau kamu melewati batas, setItem akan melempar error.
Same-origin only. localStorage terikat pada satu origin. Data yang disimpan di situs-a.com tidak bisa dibaca oleh situs-b.com, bahkan subdomain berbeda pun terpisah.
Hanya di browser. localStorage adalah API browser, jadi ia tidak tersedia di lingkungan seperti Node.js di server. Ia juga bisa dinonaktifkan oleh pengguna atau mode privat tertentu.
Sinkron (synchronous). Operasi localStorage berjalan blocking, jadi hindari menyimpan data sangat besar berkali-kali karena bisa membuat halaman terasa lambat sesaat.

Meski ada batasan-batasan ini, untuk kebutuhan menyimpan preferensi ringan, localStorage tetap salah satu alat paling praktis dan mudah dipakai di web development.

Cek Pemahaman

Apa yang harus kamu lakukan sebelum menyimpan sebuah objek ke localStorage?

FAQ Seputar localStorage

localStorage adalah apa?

localStorage adalah tempat penyimpanan bawaan browser yang menyimpan data dalam bentuk pasangan key/value berupa teks. Data yang disimpan bertahan meski tab atau browser ditutup, sampai dihapus secara sengaja. Ia dipakai lewat JavaScript dengan method seperti setItem dan getItem, dan cocok untuk mengingat preferensi pengguna seperti tema atau isi keranjang belanja tanpa perlu database server.

Apa bedanya localStorage dan sessionStorage?

Keduanya menyimpan data key/value di browser dengan API yang hampir identik, tapi umur datanya berbeda. localStorage bertahan selamanya sampai dihapus manual, sedangkan sessionStorage otomatis terhapus begitu tab ditutup. Pakai localStorage untuk data jangka panjang, dan sessionStorage untuk data sementara yang cukup hidup selama satu sesi.

Kenapa objek jadi “[object Object]” di localStorage?

Karena localStorage hanya bisa menyimpan string. Saat kamu menyimpan objek secara langsung, JavaScript mengubahnya menjadi teks [object Object] dan semua propertinya hilang. Solusinya, ubah objek menjadi teks JSON dengan JSON.stringify() sebelum menyimpan, lalu kembalikan dengan JSON.parse() saat mengambil.

Tidak disarankan. Semua JavaScript yang berjalan di halaman bisa membaca isi localStorage, termasuk script jahat yang masuk lewat serangan XSS. Untuk token autentikasi, lebih aman memakai cookie dengan flag HttpOnly yang tidak bisa diakses JavaScript. Simpan hanya data yang tidak berbahaya jika terbaca di localStorage.

Penutup

localStorage adalah salah satu alat paling praktis untuk membuat website “mengingat” sesuatu tanpa perlu server. Intinya cukup diingat dalam beberapa kalimat: ia menyimpan pasangan key/value berupa string yang bertahan sampai dihapus; kamu memakainya lewat setItem, getItem, removeItem, dan clear; objek dan array wajib lewat JSON.stringify saat menyimpan dan JSON.parse saat membaca; dan jangan pernah menaruh rahasia di dalamnya karena semua JavaScript bisa membacanya.

Langkah berikutnya, perkuat pemahamanmu dengan mempraktikkan langsung lewat pelajaran localStorage interaktif di Hyper Sheets yang bisa kamu kerjakan bertahap di browser tanpa setup. Selamat mencoba menyimpan data pertamamu!