sessionStorage & Cookie: Menyimpan Data di Browser

Kenapa Ada Tiga Cara Menyimpan?

Browser memberi tiga wadah penyimpanan, karena kebutuhannya beda-beda:

• localStorage: data menetap walau browser ditutup. Cocok untuk tema, preferensi, cache.
• sessionStorage: API-nya identik dengan localStorage, tapi data hilang saat tab ditutup. Cocok untuk data sementara satu sesi, misal isi form multi-langkah atau token sesi sekali pakai.
• Cookie: format kuno (nama=nilai), kapasitas kecil (~4KB), tapi otomatis dikirim ke server di setiap request HTTP. Inilah satu-satunya dari ketiganya yang server bisa baca langsung, fondasi sistem login klasik dan banner persetujuan.

Contoh 1: sessionStorage untuk Data Satu Sesi

// API-nya sama persis seperti localStorage
sessionStorage.setItem("namaKasir", "Budi");
console.log(sessionStorage.getItem("namaKasir")); // "Budi"

// Contoh realistis: simpan draf form supaya tidak hilang saat refresh,
// tapi otomatis bersih saat tab ditutup (tidak mengotori perangkat)
const draf = { meja: 5, pesanan: ["Kopi", "Teh"] };
sessionStorage.setItem("drafPesanan", JSON.stringify(draf));

const pulihkan = JSON.parse(sessionStorage.getItem("drafPesanan"));
console.log(pulihkan.meja); // 5

sessionStorage.removeItem("drafPesanan");
// sessionStorage.clear(); // hapus semua

Kapan pilih sessionStorage dibanding localStorage? Saat datanya tidak boleh bocor ke sesi berikutnya: draf ujian online, data checkout yang belum dibayar, atau tab kasir bersama yang dipakai bergantian.

Contoh 2: Cookie Dasar, Baca dan Tulis

// Tulis cookie sederhana (berlaku sampai browser ditutup)
document.cookie = "tema=gelap";

// Tulis dengan masa kedaluwarsa 7 hari + berlaku di seluruh situs
const tujuhHari = 7 * 24 * 60 * 60;
document.cookie = "bahasa=id; max-age=" + tujuhHari + "; path=/";

// Baca: document.cookie mengembalikan SEMUA cookie dalam satu string!
console.log(document.cookie); // "tema=gelap; bahasa=id"

// Helper kecil untuk ambil satu cookie
function bacaCookie(nama) {
  const pasangan = document.cookie.split("; ");
  for (const p of pasangan) {
    const [k, v] = p.split("=");
    if (k === nama) return decodeURIComponent(v);
  }
  return null;
}
console.log(bacaCookie("bahasa")); // "id"

// Hapus cookie: set umurnya ke masa lalu
document.cookie = "tema=; max-age=0; path=/";

Atribut penting: max-age (detik sampai kedaluwarsa) atau expires (tanggal), path=/ supaya terbaca di semua halaman, Secure (hanya dikirim lewat HTTPS), dan SameSite (membatasi pengiriman lintas situs, pertahanan CSRF).

Jebakan Umum dan Catatan Teknis

1. Cookie cuma menampung ~4KB dan terkirim tiap request. Jangan simpan data besar di cookie: memperberat setiap request ke server. Data besar tetap di localStorage/sessionStorage.

2. Nilai cookie perlu encoding. Karakter seperti ;, koma, atau spasi merusak format. Selalu encodeURIComponent saat menulis dan decodeURIComponent saat membaca.

3. Jangan simpan data sensitif di storage yang bisa dibaca JS. Token penting atau password di localStorage/sessionStorage/cookie biasa bisa dicuri lewat XSS. Untuk sesi login yang aman, minta server menyetel cookie HttpOnly (tidak bisa dibaca JS sama sekali).

4. document.cookie saat ditulis hanya menambah/menimpa satu cookie, tapi saat dibaca mengembalikan semuanya sekaligus. Asimetri ini membingungkan pemula: menulis itu per-cookie, membaca itu borongan.

Ringkasan

Pakai localStorage untuk preferensi permanen, sessionStorage untuk data sekali-sesi yang bersih sendiri, dan cookie saat server perlu ikut membaca (login, preferensi lintas request). Ingat batas cookie: kecil, butuh parsing manual, dan amankan dengan HttpOnly/Secure/SameSite untuk data penting.