LocalStorage & SessionStorage — Web Fundamentals

Web Storage API menyediakan dua mekanisme penyimpanan data di browser: localStorage dan sessionStorage. Keduanya menyimpan data sebagai key-value pairs…

Web Storage adalah tempat menyimpan data kecil di browser, langsung dari JavaScript. Ada dua: localStorage, yang isinya bertahan sampai dihapus, dan sessionStorage, yang isinya hilang begitu tab ditutup. Beda dengan cookie, isi keduanya gak pernah ikut terkirim ke server.

🧪 Tebakan cepat: kamu menyimpan sesuatu di sessionStorage, lalu membuka situs yang sama di tab baru. Datanya ada di tab baru itu? Tebak dulu, jawabannya ada di bagian "Berapa lama dan di mana datanya hidup".

Simpan, baca, hapus

Method-nya sama persis di localStorage dan sessionStorage:

localStorage.setItem("tema", "gelap")
sessionStorage.setItem("langkah", "2")

localStorage.getItem("tema")      // "gelap"
sessionStorage.getItem("langkah") // "2"
localStorage.getItem("bahasa")    // null, belum pernah disimpan

localStorage.removeItem("tema")   // hapus satu key
sessionStorage.clear()            // hapus semua isi sessionStorage

setItem("tema", "gelap") menyimpan nilai "gelap" dengan nama "tema". Nama ini disebut key, kayak label di laci.
getItem("tema") membaca nilai dari key itu. Key yang belum pernah disimpan menghasilkan null.
removeItem("tema") menghapus satu key, clear() mengosongkan semuanya.
localStorage.length memberi tahu ada berapa key yang tersimpan.

Yang membedakan keduanya cuma berapa lama datanya bertahan dan siapa yang bisa melihatnya.

Berapa lama dan di mana datanya hidup

Kejadian	`localStorage`	`sessionStorage`
Halaman di-refresh	tetap ada	tetap ada
Situs yang sama dibuka di tab baru	kelihatan	kosong, tiap tab punya sendiri
Tab ditutup, browser dibuka lagi	tetap ada	hilang
Situs lain	gak kelihatan	gak kelihatan

Jadi jawaban tebakannya: gak ada. sessionStorage milik satu tab, sedangkan localStorage dipakai bersama semua tab dari situs yang sama.

Keduanya dipisah per origin. Origin adalah gabungan skema, host dan port sebuah alamat: https://toko.com dan https://blog.toko.com itu dua origin, jadi gak bisa saling membaca isi storage. Tiap origin dapat sekitar 5 MB. Kalau lewat, setItem melempar error QuotaExceededError.

Isinya selalu teks, jadi object lewat JSON

Web Storage cuma menyimpan teks. Angka 10 balik sebagai "10", dan object tanpa JSON jadi "[object Object]". Object dan array disimpan pakai JSON.stringify, lalu dibaca lagi pakai JSON.parse:

const user = { name: "Budi", level: 5 }
localStorage.setItem("user", JSON.stringify(user)) // '{"name":"Budi","level":5}'

const simpanan = JSON.parse(localStorage.getItem("user"))
simpanan.level // 5, angka lagi

Key yang gak ada menghasilkan null, jadi biasanya dibungkus function yang memberi nilai cadangan:

function ambil(key, cadangan) {
  const teks = localStorage.getItem(key)
  return teks === null ? cadangan : JSON.parse(teks)
}

ambil("bahasa", "id") // "id", karena key bahasa belum ada

Kapan pakai yang mana

localStorage: hal yang perlu diingat lama, misalnya tema, bahasa, atau draft tulisan.
sessionStorage: data sementara selama satu kunjungan, misalnya langkah form multi-step yang belum selesai.
Cookie: data yang server perlu baca di tiap request, misalnya ID session login.
IndexedDB: data besar atau banyak. localStorage bekerja sinkron, artinya tiap setItem dan getItem menahan halaman sampai selesai, jadi gak cocok buat data besar.

Jangan simpan token login, password atau data kartu di Web Storage. Semua JavaScript di halaman bisa membacanya, termasuk script jahat yang berhasil menyusup (XSS).

⚠️ Jebakan yang sering ketemu

Angka balik jadi teks. "10" + 1 hasilnya "101". Ubah dulu pakai Number(...).
JSON.parse pada teks rusak. Kalau isinya bukan JSON yang valid, JSON.parse melempar error. Bungkus dengan try...catch dan kembalikan nilai cadangan.
Mengira sessionStorage milik situs. Dia milik satu tab. Dua tab dari situs yang sama punya sessionStorage masing-masing.
Tab yang dipulihkan. Tab yang dibuka lagi lewat Ctrl+Shift+T atau fitur pulihkan sesi ikut mendapat sessionStorage lamanya. Jangan andalkan tutup tab buat menghapus data penting.

💡 Tahu kalau tab lain mengubah data. window.addEventListener("storage", ...) jalan di tab lain dari origin yang sama setiap kali localStorage berubah, tapi gak di tab yang mengubahnya. Berguna buat logout di semua tab sekaligus.

TL;DR: setItem menyimpan, getItem membaca (key yang gak ada menghasilkan null), removeItem dan clear menghapus, sama untuk kedua storage. localStorage bertahan sampai dihapus dan dipakai bersama semua tab dari origin yang sama. sessionStorage milik satu tab dan hilang saat tab ditutup. Isinya selalu teks, sekitar 5 MB per origin, gak pernah dikirim ke server, jadi object disimpan lewat JSON.stringify dan dibaca lewat JSON.parse. Data rahasia gak boleh disimpan di sini.