Belajar JavaScript - Web Storage, Cookies, dan State Client-Side

#Pendahuluan

Ketika pengguna menutup tab dan membukanya lagi, aplikasi biasanya kehilangan semua konteks. Web Storage, cookies, dan mekanisme lain memberi cara menyimpan state di sisi browser — sehingga preferensi, keranjang belanja, dan pengaturan tetap ada di kunjungan berikutnya.

Episode 18 membahas tiga mekanisme utama penyimpanan client-side: localStorage yang bertahan sampai dihapus manual, sessionStorage yang hidup selama satu tab, dan cookies yang dikirim otomatis ke server setiap request. Kalian juga belajar pola yang aman: serialisasi JSON, menangani data yang rusak, dan membatasi apa yang boleh disimpan. Konsep kuncinya: tiga mekanisme ini melayani kebutuhan berbeda — memilih yang salah, misalnya menyimpan token rahasia di localStorage, adalah kesalahan keamanan serius.

#localStorage: Penyimpanan Persisten

#Menyimpan dan Membaca String

localStorage menyimpan pasangan kunci-nilai berupa string, dan bertahan meski browser ditutup:

localStorage dasar

localStorage.setItem("tema", "gelap");
localStorage.setItem("kota", "Jakarta");
 
console.log(localStorage.getItem("tema"));
console.log(localStorage.getItem("tidak-ada"));
localStorage.removeItem("tema");

localStorage.setItem("tema", "gelap") menyimpan nilai, getItem membaca, dan removeItem menghapus. getItem untuk kunci yang tidak ada mengembalikan null. Semua nilai disimpan sebagai string — angka 42 akan kembali sebagai "42". Kapasitas sekitar 5 MB per origin.

#Menyimpan Objek dengan JSON

Karena hanya string yang bisa disimpan, objek harus diserialisasi dengan JSON.stringify dan diparse ulang dengan JSON.parse:

Menyimpan objek di localStorage

const preferensi = {
  tema: "gelap",
  ukuranFont: 16,
  bahasa: "id",
};
 
localStorage.setItem("preferensi", JSON.stringify(preferensi));
 
const tersimpan = localStorage.getItem("preferensi");
const objek = JSON.parse(tersimpan);
 
console.log(objek.tema);
console.log(objek.ukuranFont);

JSON.stringify(preferensi) mengubah objek menjadi string JSON sebelum disimpan, dan JSON.parse mengembalikannya menjadi objek. Pola setItem dengan stringify dan getItem dengan parse adalah standar untuk state berbasis objek di localStorage.

#Menangani Data yang Rusak

JSON.parse melempar error jika string bukan JSON valid — misalnya karena versi aplikasi lama. Selalu bungkus dengan try...catch:

Parse yang aman

function bacaPreferensi() {
  const mentah = localStorage.getItem("preferensi");
  if (mentah === null) return {};
 
  try {
    return JSON.parse(mentah);
  } catch {
    return {};
  }
}
 
const preferensi = bacaPreferensi();
console.log(preferensi.tema ?? "default");

try {...} catch mengembalikan objek kosong jika data rusak, sehingga aplikasi tidak crash saat membaca state lama. if (mentah === null) menangani kunci yang belum pernah ada. Pola safe parse ini wajib untuk aplikasi yang menyimpan state dan bisa berubah format antar versi.

#sessionStorage: Data per Tab

#Berbeda dari localStorage

sessionStorage memiliki API yang identik dengan localStorage, tapi cakupannya berbeda: data hidup selama tab terbuka dan hilang saat tab ditutup. Setiap tab punya sessionStorage sendiri:

sessionStorage per tab

sessionStorage.setItem("posisiScroll", "850");
sessionStorage.setItem("keranjang", JSON.stringify([1, 2, 3]));
 
console.log(sessionStorage.getItem("posisiScroll"));
 
const keranjang = JSON.parse(sessionStorage.getItem("keranjang"));
console.log(keranjang.length);

sessionStorage.setItem("posisiScroll", "850") menyimpan state sementara tab aktif — cocok untuk posisi scroll yang dipulihkan saat navigasi balik, draft form, atau state wizard multi-langkah yang belum disimpan. Jika datanya harus bertahan antar kunjungan, gunakan localStorage; jika cukup untuk tab aktif, sessionStorage lebih aman karena otomatis dibersihkan.

#Cookies: Data yang Dikirim ke Server

#Bekerja dengan document.cookie

Berbeda dari Web Storage, cookies dikirim otomatis ke server pada setiap request HTTP. Akses dari JavaScript lewat document.cookie:

Menulis dan membaca cookies

document.cookie = "bahasa=id; max-age=86400; path=/";
document.cookie = "sesi=abc123; path=/; HttpOnly";
 
console.log(document.cookie);

document.cookie = "bahasa=id; max-age=86400; path=/" menetapkan cookie dengan masa berlaku satu hari. Atribut path=/ membuat cookie berlaku untuk seluruh situs. HttpOnly menandai cookie tidak bisa dibaca JavaScript — itu sebabnya cookie sesi dengan HttpOnly tidak muncul di output document.cookie.

#Batasan dan Atribut Keamanan

Cookies punya aturan penting yang wajib dipahami:

Ukuran kecil: sekitar 4 KB per cookie, dan total terbatas.
HttpOnly: cookie tidak bisa dibaca JavaScript — lebih aman untuk token.
Secure: cookie hanya dikirim lewat HTTPS.
SameSite: mengontrol kapan cookie dikirim ke situs lain.

Cookie dengan atribut keamanan

document.cookie =
  "token=abc123; max-age=3600; path=/; Secure; SameSite=Strict";

Secure; SameSite=Strict membatasi cookie hanya pada koneksi HTTPS dan mencegahnya dikirim dari situs lain — pertahanan dasar terhadap serangan CSRF. Atribut keamanan cookie ini adalah garis pertahanan yang tidak boleh dilonggarkan tanpa alasan kuat.

#Memilih Mekanisme yang Tepat

#Tabel Keputusan

Tiga mekanisme melayani tiga kebutuhan yang berbeda. Pilihannya ringkas:

localStorage: data klien yang harus bertahan — preferensi, cache konten.
sessionStorage: data sementara per tab — draft, posisi.
Cookies: data yang harus dikirim server setiap request — token sesi.

Aturan keamanan yang paling penting: jangan simpan token akses di localStorage. localStorage bisa dibaca oleh skrip apa pun yang berjalan di halaman, dan mengeksposnya ke serangan XSS berarti menyerahkan token itu. Token sebaiknya hidup di cookie HttpOnly yang tidak terjangkau JavaScript.

#Pola State Sederhana

Praktik yang direkomendasikan: tulis fungsi kecil yang menyembunyikan detail serialisasi:

Pola state yang aman

const state = {
  simpan(nama, nilai) {
    localStorage.setItem(nama, JSON.stringify(nilai));
  },
  baca(nama) {
    const mentah = localStorage.getItem(nama);
    if (mentah === null) return null;
    try {
      return JSON.parse(mentah);
    } catch {
      return null;
    }
  },
  hapus(nama) {
    localStorage.removeItem(nama);
  },
};
 
state.simpan("pengguna", { nama: "Arman" });
console.log(state.baca("pengguna"));

state.simpan(nama, nilai) dan state.baca(nama) menyembunyikan stringify dan parse plus penanganan error di satu tempat. Semua pemanggil cukup memakai state tanpa tahu detail penyimpanan. Pola seperti ini menjaga konsistensi dan memudahkan migrasi jika mekanisme penyimpanan berubah.

#Penutup

Episode 18 membekali kalian penyimpanan state client-side: localStorage untuk data persisten dengan serialisasi JSON, sessionStorage untuk data sementara per tab, dan cookies untuk data yang dikirim ke server dengan atribut keamanan. Kalian juga belajar pola penyimpanan yang aman dan terpusat.

Inti yang harus dibawa pulang:

localStorage bertahan sampai dihapus; sessionStorage hilang saat tab ditutup.
Nilai yang disimpan selalu string — serialisasi dengan JSON.
Bungkus JSON.parse dengan try...catch untuk data yang bisa rusak.
Cookies dikirim otomatis ke server; Web Storage tidak.
Jangan simpan token di localStorage — pakai cookie HttpOnly.
Pusatkan logika penyimpanan ke satu modul state.

Di episode 19 selanjutnya kita akan membahas debugging dan console tools — menemukan dan memperbaiki bug dengan Console API, breakpoint, dan DevTools. Kalian belajar membaca error dan stack trace, memakai debugger, serta menganalisis performa dengan alat yang sudah ada di browser.