Tutorial LocalStorage dan SessionStorage di JavaScript

Pada era aplikasi web modern, kemampuan untuk menyimpan data langsung di browser menjadi kebutuhan penting. Baik aplikasi sederhana seperti penyimpanan tema (dark/light mode), hingga aplikasi kompleks seperti dashboard, e-commerce, atau sistem login, semuanya membutuhkan cara menyimpan data secara efisien tanpa selalu bergantung pada server.

Di sinilah Web Storage API—yang berisi localStorage dan sessionStorage—berperan besar.

Baca juga: Form Validation dengan JavaScript (Validasi Input Form)

Apa Itu Web Storage API?

Web Storage API adalah fitur bawaan browser yang memungkinkan JavaScript menyimpan data secara lokal di sisi pengguna (client-side). Data yang disimpan berupa pasangan key–value dan dapat diakses kapan saja selama masih berada dalam domain yang sama.

Web Storage API memiliki dua komponen utama:

• localStorage → data tersimpan permanen (sampai dihapus).
• sessionStorage → data tersimpan hanya selama sesi tab aktif.

Tidak seperti cookie yang dikirim ke server di setiap request, Web Storage API bekerja sepenuhnya di sisi client sehingga lebih cepat dan efisien.

Peran localStorage & sessionStorage pada Aplikasi Modern

Dalam aplikasi web masa kini, kedua penyimpanan ini digunakan untuk:

• Menyimpan preferensi pengguna
  Contoh: tema dark mode, bahasa, layout.

• Membuat pengalaman pengguna lebih nyaman
  Contoh: form tidak hilang saat halaman di-refresh.

• Menyimpan status sesi sementara
  Contoh: progress langkah form (multi-step form), status login sementara, hasil filter.

• Mengurangi kebutuhan request ke server
  Data yang tidak perlu selalu diambil dari server bisa disimpan secara lokal.

• Membuat aplikasi web terasa seperti aplikasi mobile
  Dengan penyimpanan lokal, aplikasi dapat berjalan lebih mulus dan cepat.

Web Storage sangat penting terutama pada SPA (Single Page Application) seperti React, Vue, dan Angular.

Kenapa Penyimpanan Client-Side Penting?

Ada beberapa alasan kenapa penyimpanan client-side seperti localStorage/sessionStorage sangat dibutuhkan:

1. Aplikasi Web Semakin Kompleks
   Banyak aplikasi modern memerlukan data kecil untuk bertahan (persist) tanpa bergantung pada server.

2. Mengurangi Overhead Server
   Dengan menyimpan data kecil di browser, server tidak perlu menangani data yang dapat dikelola sendiri oleh user.

3. Memberikan User Experience yang Lebih Baik
   Contohnya:

   • Data tetap aman saat halaman di-refresh
   • Pengaturan tetap tersimpan
   • Riwayat pencarian tidak hilang

4. Lebih Cepat dan Ringan
   Karena tidak ada komunikasi dengan server, proses pembacaan data jauh lebih cepat.

Kelebihan Web Storage Dibanding Cookie

Cookies adalah teknologi lama yang sering digunakan untuk menyimpan data kecil. Namun dibandingkan cookie, Web Storage API memiliki banyak keunggulan:

Fitur	Cookie	localStorage/sessionStorage
Ukuran Maksimal	±4KB	±5MB
Kecepatan	Lambat, dikirim ke server	Cepat, tidak dikirim ke server
API	Sulit, manual	Mudah (setItem, getItem)
Keamanan	Mudah bocor lewat request	Lebih aman (client-side only)
Penyimpanan	Bisa expire	Permanen / per-sesi
Format	String	String tapi mudah dikelola dengan JSON

Di bagian ini penulis hanya memberikan gambaran fundamental mengenai Web Storage API dan perannya pada aplikasi modern. Dengan memahami dasar ini, kamu akan lebih mudah mengikuti bagian-bagian selanjutnya dimana kita mulai menggunakan localStorage dan sessionStorage dengan contoh nyata, studi kasus, hingga best practice.

localStorage

Setelah memahami dasar Web Storage API, sekarang kita masuk ke komponen pertamanya: localStorage. Fitur ini adalah salah satu bagian paling penting dari penyimpanan data di browser karena mampu menyimpan data secara persisten alias permanen—bahkan setelah browser ditutup sekalipun. Bagian ini akan membahas secara lengkap apa itu localStorage, bagaimana cara kerjanya, batasan kapasitasnya, dan contoh penggunaan di aplikasi nyata.

Pengertian localStorage JavaScript

localStorage adalah mekanisme penyimpanan data lokal yang diberikan oleh Web Storage API. Data disimpan dalam format key-value (kunci–nilai), di mana baik kunci maupun nilainya harus berupa string.

Meskipun hanya menerima string, kita bisa menyimpan tipe data lain (array, object, number) dengan mudah menggunakan JSON.stringify() dan membacanya menggunakan JSON.parse().

Contoh sederhana:

localStorage.setItem("nama", "Aris");
console.log(localStorage.getItem("nama")); 
// Output: ArisCode language: JavaScript (javascript)

Dengan localStorage:

• Data tidak akan hilang meskipun tab ditutup
• Data tetap ada meskipun browser dimatikan
• Data tetap ada sampai kita hapus manual dengan removeItem() atau clear()

Cara Kerja Penyimpanan Permanen di Browser

localStorage bekerja secara persistent, artinya:

• Menyimpan data dalam penyimpanan internal browser
• Menggunakan domain sebagai boundary (domain A tidak bisa membaca domain B)
• Data dapat dibaca kapan saja selama berada di domain yang sama
• Tidak ada masa kadaluarsa (Expiration Date = none)

Prosesnya dapat digambarkan:

• JavaScript memanggil localStorage.setItem()
• Browser menyimpan data di penyimpanan lokalnya
• Setiap halaman pada domain tersebut dapat mengakses data tersebut
• Data tetap tersedia sampai dihapus manual oleh developer atau user

Perbandingan lifespan:

Storage	Bertahan Saat Refresh	Bertahan Setelah Tab Ditutup	Bertahan Setelah Browser Ditutup
sessionStorage	Ya	Tidak	Tidak
localStorage	Ya	Ya	Ya

Batasan Kapasitas localStorage

Biasanya localStorage menyediakan kapasitas antara:

5MB – 10MB per domain, tergantung browser

Rata-rata:

Browser	Kapasitas localStorage
Chrome	10MB
Firefox	10MB
Safari	5MB
Edge	10MB

Ini jauh lebih besar dibandingkan cookie yang hanya sekitar 4KB.

Catatan penting:

• localStorage tidak cocok untuk data besar seperti gambar atau file besar
• Jangan menyimpan informasi sensitif (password, token login)
• Cocok untuk data kecil hingga menengah

Contoh Kegunaan localStorage pada Aplikasi Web

localStorage sangat berguna untuk membuat aplikasi web yang lebih interaktif dan terasa seperti aplikasi native. Berikut contoh kasus pemakaian yang sering ditemui:

1. Menyimpan Tema (Dark Mode / Light Mode)

Banyak website menyimpan pengaturan tema supaya tetap konsisten.

localStorage.setItem("theme", "dark");

const getTheme = localStorage.getItem("theme");
console.log(getTheme); // darkCode language: JavaScript (javascript)

2. Menyimpan Data Form Sementara

Agar data tidak hilang ketika pengguna me-refresh halaman.

localStorage.setItem("email", emailInput.value);Code language: CSS (css)

3. Menyimpan Keranjang Belanja (Shopping Cart)

Toko online sering menggunakan localStorage untuk menyimpan item sementara pengguna belum checkout.

localStorage.setItem("cart", JSON.stringify(cartItems));Code language: JavaScript (javascript)

4. Menyimpan Riwayat Pencarian

Aplikasi pencarian seperti marketplace, e-learning, atau blog sering menggunakan localStorage untuk menyimpan riwayat pencarian pengguna.

let history = JSON.parse(localStorage.getItem("searchHistory")) || [];
history.push("tutorial javascript");
localStorage.setItem("searchHistory", JSON.stringify(history));Code language: JavaScript (javascript)

5. Menyimpan Status Login (non-sensitif)

LocalStorage boleh menyimpan token non-privasi, tapi tidak boleh menyimpan password atau data sensitif.

localStorage adalah penyimpanan permanen yang stabil, mudah digunakan, dan sangat bermanfaat pada banyak aplikasi modern. Setelah memahami localStorage, selanjutnya kita akan membahas saudara dekatnya yaitu sessionStorage.

sessionStorage

Jika sebelumnya kita telah membahas localStorage yang bersifat permanen, sekarang saatnya membahas “saudaranya” yaitu sessionStorage. Meskipun sama-sama bagian dari Web Storage API, sessionStorage bekerja dengan cara yang sangat berbeda—lebih terbatas, lebih aman untuk data sementara, dan ideal untuk menyimpan informasi yang hanya relevan selama sesi halaman aktif.

Pada bagian ini, kita membahas definisi sessionStorage, cara kerjanya, perbedaannya dengan localStorage, hingga kapan sebaiknya digunakan.

Pengertian sessionStorage JavaScript

sessionStorage adalah mekanisme penyimpanan data sementara di browser yang hanya bertahan selama satu sesi halaman (page session). Artinya:

• Data akan hilang ketika tab ditutup
• Data hilang ketika browser ditutup
• Data tetap ada saat halaman di-refresh
• Data hanya berlaku untuk tab yang sama (tidak berbagi data antar tab)

Penyimpanan sessionStorage juga memakai format key–value, sama seperti localStorage:

sessionStorage.setItem("username", "ArisDev");
console.log(sessionStorage.getItem("username"));
// Output: ArisDevCode language: JavaScript (javascript)

Cara Kerja Penyimpanan Sementara

sessionStorage menggunakan konsep session scoped, yaitu penyimpanan yang hanya berlaku selama tab yang membuka halaman masih aktif.

Cara kerjanya:

• Ketika pengguna membuka tab baru → browser membuat ruang sessionStorage baru untuk domain tersebut.
• Data yang disimpan akan hidup selama tab tersebut masih terbuka.
• Jika tab ditutup → semua data sessionStorage langsung hilang.
• Jika membuka tab baru dari domain yang sama → session yang berbeda (data tidak dibagikan).
• Jika halaman di-refresh → data tetap ada selama tab tidak ditutup.

Ini membuat sessionStorage ideal untuk data sementara yang tidak perlu disimpan permanen.

Perbedaan sessionStorage dan localStorage

Meskipun terlihat mirip, keduanya memiliki perbedaan mendasar.

Fitur	localStorage	sessionStorage
Lama Bertahan	Permanen sampai dihapus	Hilang jika tab ditutup
Berlaku pada Tab Lain	Ya (selama domain sama)	Tidak, hanya pada tab yang sama
Kapasitas	±5–10MB	±5–10MB
Berbagi Data Antar Tab	Ya	Tidak
Cocok Untuk	Preferensi, cache data, cart	Data sementara, form sementara, token sesi

Penjelasan Singkat:

• localStorage cocok untuk data jangka panjang
• sessionStorage cocok untuk data jangka pendek yang hanya diperlukan sementara
• sessionStorage lebih aman untuk data yang tidak boleh dibagikan antar tab

Kapan Sebaiknya Menggunakan sessionStorage

Berikut beberapa kondisi ideal untuk menggunakan sessionStorage:

1. Menyimpan Data Form Sementara (Saat Pengguna Belum Submit)

Misalnya pengguna mengisi form panjang (pendaftaran, checkout). Ketika tab di-refresh, data tetap ada, tapi begitu tab ditutup, data dibuang.

sessionStorage.setItem("stepForm", "2");Code language: JavaScript (javascript)

2. Menyimpan Token Sesi Non-Sensitif

Misalnya token sementara untuk sesi penggunaan fitur tertentu.

Contoh:

sessionStorage.setItem("sessionToken", "abc123xyz");Code language: JavaScript (javascript)

Token tidak dibagikan ke tab lain → lebih aman.

3. Menyimpan Status Halaman Aktif

Misalnya:

• Tab mana yang sedang dipilih
• Step wizard yang sedang dibuka
• Data filter sementara

4. Menyimpan Informasi yang Harus Hilang Setelah Tab Ditutup

Contoh:

• Status pop-up: “Sudah ditutup pada tab ini”
• Data progress pengguna di halaman tertentu
• Data sementara pada aplikasi dashboard / SPA

5. Menyimpan Data untuk Aplikasi Demo atau Testing

Karena cepat hilang, tepat untuk fitur yang tidak butuh persistensi.

Contoh Penggunaan sessionStorage di Aplikasi Nyata

1. Menyimpan posisi scroll halaman

window.addEventListener("scroll", () => {
    sessionStorage.setItem("scrollPos", window.scrollY);
});Code language: JavaScript (javascript)

2. Menyimpan draft komentar sementara

textarea.addEventListener("input", () => {
    sessionStorage.setItem("draftComment", textarea.value);
});Code language: PHP (php)

3. Menyimpan state tab navigasi

sessionStorage.setItem("activeTab", "profile");Code language: JavaScript (javascript)

sessionStorage adalah penyimpanan sementara yang sangat berguna untuk aplikasi yang membutuhkan data dalam satu sesi saja. Dengan memahami sifat dan batasannya, Anda bisa menentukan kapan harus menggunakan sessionStorage atau localStorage.

Perbedaan localStorage dan sessionStorage

Untuk memahami kapan harus memakai localStorage atau sessionStorage, kamu perlu melihat bagaimana keduanya menyimpan data, seberapa lama data bertahan, serta pada situasi apa masing-masing lebih cocok digunakan. Berikut penjelasan lengkapnya.

Tabel Perbandingan localStorage vs sessionStorage

Aspek	localStorage	sessionStorage
Umur Data	Permanen sampai dihapus manual oleh aplikasi atau pengguna	Hilang ketika tab/browser ditutup
Cakupan (Scope)	Berlaku untuk semua tab di domain yang sama	Khusus tab saat ini saja (tidak terbagi antar tab)
Kapasitas	±5–10 MB (bergantung browser)	±5 MB (umumnya lebih kecil)
Keamanan	Rentan XSS karena data dapat dibaca JS	Sama rentan XSS, tapi lebih aman dari sisi umur data
Kecepatan Akses	Sangat cepat karena disimpan di browser	Sama cepatnya karena berbasis memori browser
Sync Antartab	Ya, data dapat dipakai tab lain	Tidak, hanya untuk 1 tab
Use Case Utama	Tema, token non-sensitif, preferensi pengguna, cache ringan	Data sementara seperti form wizard, filter halaman, atau state sesi sementara

Penjelasan Perbedaan Utama

1. Umur dan Persistensi Data

• localStorage menyimpan data secara persisten.
  Cocok untuk “data yang harus tetap ada”.

• sessionStorage hanya bertahan selama tab aktif.
  Cocok untuk “data sementara”, tidak perlu disimpan selamanya

2. Kapasitas Penyimpanan

Keduanya menyediakan kapasitas yang jauh lebih besar dibanding cookie, namun:

• localStorage biasanya memiliki kapasitas sedikit lebih besar.
• sessionStorage punya batas yang cukup untuk kebutuhan state sementara.

3. Keamanan

Keduanya tidak aman untuk menyimpan data sensitif, seperti:

• password
• token login penting
• informasi pribadi

Sebab keduanya dapat diakses oleh JavaScript dan rentan serangan XSS.

Namun, sessionStorage lebih aman dari risiko ditinggal permanen, karena menghapus dirinya otomatis saat tab ditutup.

4. Akses Antartab

• localStorage: bisa dibaca tab lain pada domain yang sama.
• sessionStorage: khusus tab saat ini, sehingga cocok untuk isolasi data per tab.

Contoh:

• Tab A dan Tab B (domain sama) → localStorage berbagi data.
• Tab A dan Tab B → sessionStorage memiliki data masing-masing.

Dasar Penggunaan localStorage

localStorage adalah fitur Web Storage API yang memungkinkan kamu menyimpan data secara permanen di browser tanpa kedaluwarsa. Sangat cocok untuk menyimpan preferensi, pengaturan, atau cache ringan dalam aplikasi web.

Di bagian ini kamu akan belajar cara dasar menggunakan localStorage: setItem, getItem, removeItem, clear, hingga cara mengecek dukungan browser, lengkap dengan contoh kasus penyimpanan dark/light mode.

1. Menyimpan Data: localStorage.setItem()

Digunakan untuk menambahkan atau memperbarui data.

localStorage.setItem("username", "ArisDev");Code language: JavaScript (javascript)

• Parameter 1 = key
• Parameter 2 = value (harus berupa string)

Untuk menyimpan objek, lakukan stringify:

const user = { name: "Aris", role: "admin" };
localStorage.setItem("userData", JSON.stringify(user));Code language: JavaScript (javascript)

2. Mengambil Data: localStorage.getItem()

Untuk membaca data berdasarkan key.

const name = localStorage.getItem("username");
console.log(name); // "ArisDev"Code language: JavaScript (javascript)

Jika data berupa JSON:

const user = JSON.parse(localStorage.getItem("userData"));
console.log(user.name);Code language: JavaScript (javascript)

Jika key tidak ada, hasilnya null.

3. Menghapus Data Tertentu: localStorage.removeItem()

Menghapus satu key dari localStorage.

localStorage.removeItem("username");Code language: JavaScript (javascript)

4. Menghapus Semua Data: localStorage.clear()

Menghapus seluruh data yang tersimpan di domain tersebut.

localStorage.clear();Code language: CSS (css)

Hati-hati: ini akan menghapus semua data aplikasi di situs tersebut.

5. Cek Ketersediaan Web Storage di Browser

Tidak semua browser lama mendukung Web Storage. Gunakan pengecekan berikut:

if (typeof Storage !== "undefined") {
    console.log("localStorage tersedia!");
} else {
    console.log("Browser tidak mendukung Web Storage.");
}Code language: JavaScript (javascript)

Atau versi lebih aman:

function storageAvailable(type) {
    try {
        const storage = window[type];
        const testKey = "__test__";
        storage.setItem(testKey, testKey);
        storage.removeItem(testKey);
        return true;
    } catch (e) {
        return false;
    }
}

if (storageAvailable("localStorage")) {
    console.log("localStorage siap digunakan");
}Code language: JavaScript (javascript)

6. Contoh Kasus: Menyimpan Tema Dark/Light Mode

Kasus paling umum adalah menyimpan preferensi tema. Jika pengguna memilih dark mode, kita ingin agar pilihan tersebut tetap dipakai setiap kali mereka membuka website.

HTML Toggle Tema:

<button id="toggleTheme">Toggle Tema</button>Code language: HTML, XML (xml)

JavaScript: Simpan dan Terapkan Tema

const btn = document.getElementById("toggleTheme");
const body = document.body;

// Muat tema saat halaman dibuka
const savedTheme = localStorage.getItem("theme");

if (savedTheme) {
    body.className = savedTheme;
}

// Event toggle
btn.addEventListener("click", () => {
    const currentTheme = body.classList.contains("dark") ? "light" : "dark";
    
    // Terapkan
    body.className = currentTheme;
    
    // Simpan
    localStorage.setItem("theme", currentTheme);
});Code language: JavaScript (javascript)

Cara Kerja Alur Tema

• Saat pengguna klik toggle → tema berpindah.
• Tema baru disimpan di localStorage.
• Saat halaman dibuka lagi → tema otomatis dimuat dari localStorage.
• Pengalaman pengguna jadi lebih nyaman & konsisten.

Dasar Penggunaan sessionStorage

sessionStorage adalah bagian dari Web Storage API yang digunakan untuk menyimpan data sementara selama sesi browser berlangsung. Ketika tab atau jendela browser ditutup, seluruh data akan hilang otomatis.

Berbeda dengan localStorage yang menyimpan data permanen, sessionStorage cocok untuk data yang hanya diperlukan sementara seperti data form sementara, progress langkah, token sesi non-sensitif, atau penanda status halaman.

Pada bagian ini kamu akan belajar dasar penggunaan:

setItem, getItem, removeItem, clear, termasuk contoh penyimpanan data sesi login sementara dan contoh menyimpan langkah pengguna dalam satu sesi.

1. Menyimpan Data: sessionStorage.setItem()

Digunakan untuk menyimpan data selama sesi browser.

sessionStorage.setItem("loginStep", "1");Code language: JavaScript (javascript)

Seperti localStorage, data harus berupa string. Jika data berupa objek:

const userSession = { id: 10, status: "active" };
sessionStorage.setItem("sessionUser", JSON.stringify(userSession));Code language: JavaScript (javascript)

2. Mengambil Data: sessionStorage.getItem()

Mengambil data berdasarkan key yang telah disimpan.

const step = sessionStorage.getItem("loginStep");
console.log(step); // "1"Code language: JavaScript (javascript)

Jika berbentuk JSON:

const sessionUser = JSON.parse(sessionStorage.getItem("sessionUser"));
console.log(sessionUser.status);Code language: JavaScript (javascript)

Jika key tidak ditemukan → hasilnya null.

3. Menghapus Data Tertentu: sessionStorage.removeItem()

Menghapus data berdasarkan key tertentu.

sessionStorage.removeItem("loginStep");Code language: JavaScript (javascript)

4. Menghapus Semua Data: sessionStorage.clear()

Untuk menghapus seluruh data pada sessionStorage.

sessionStorage.clear();Code language: CSS (css)

Ini akan menghapus semua key yang dibuat di tab/jendela browser tersebut.

5. Penggunaan sessionStorage Untuk Penyimpanan Data Sesi Login Sementara

sessionStorage sangat cocok untuk data non-sensitif yang hanya dipakai sementara, seperti:

• Status login sementara (misalnya “sedang login”)
• Token sesi non-authentication-critical
• Data form sementara sebelum dikirimkan
• Flag atau indikator pengguna sedang mengerjakan proses tertentu

Contoh menyimpan status login sementara:

sessionStorage.setItem("isLoggedIn", "true");Code language: JavaScript (javascript)

Menampilkan pesan ketika user kembali ke halaman dalam tab yang sama:

if (sessionStorage.getItem("isLoggedIn") === "true") {
    console.log("Selamat datang kembali di sesi ini!");
}Code language: JavaScript (javascript)

Catatan keamanan:

• ✔ aman untuk data UI
• ✘ jangan menyimpan password, private keys, atau token sensitif apa pun.

6. Contoh Kasus: Menyimpan Langkah Pengguna Dalam Satu Sesi (Multi-Step Form / Wizard)

Misalnya kamu memiliki form multistep 3 langkah. Kamu ingin pengguna kembali ke langkah terakhir jika mereka refresh halaman—selama tab masih aktif.

HTML Kasar Untuk Multi-Step Wizard:

<div id="step1" class="step">Langkah 1</div>
<div id="step2" class="step">Langkah 2</div>
<div id="step3" class="step">Langkah 3</div>

<button id="nextBtn">Next</button>Code language: HTML, XML (xml)

JavaScript Menyimpan Langkah:

let currentStep = sessionStorage.getItem("currentStep");

if (!currentStep) {
    currentStep = 1;
    sessionStorage.setItem("currentStep", "1");
}

function showStep(step) {
    document.querySelectorAll(".step").forEach(s => s.style.display = "none");
    document.getElementById(`step${step}`).style.display = "block";
}

showStep(currentStep);

document.getElementById("nextBtn").addEventListener("click", () => {
    currentStep = parseInt(currentStep) + 1;

    if (currentStep > 3) currentStep = 1;

    sessionStorage.setItem("currentStep", currentStep.toString());
    showStep(currentStep);
});Code language: JavaScript (javascript)

Cara Kerja:

1. Saat user membuka halaman → cek apakah ada currentStep dalam sessionStorage.
2. Jika tidak ada (pertama kali membuka halaman) → mulai dari step 1.
3. Setiap klik tombol Next → step disimpan ke sessionStorage.
4. Jika user refresh halaman → wizard kembali ke langkah terakhir.
5. Jika tab browser ditutup → semua data hilang, mulai dari awal lagi.

Keamanan Penyimpanan Data Browser

Keamanan adalah aspek yang wajib diperhatikan ketika menggunakan localStorage maupun sessionStorage. Meskipun Web Storage API sangat membantu dalam menyimpan data di sisi client, mekanisme ini tetap memiliki kelemahan fundamental—terutama terhadap serangan XSS (Cross-Site Scripting).

Pada bagian ini, kamu akan mempelajari:

• Ancaman XSS terhadap Web Storage
• Jenis data sensitif yang tidak boleh disimpan
• Cara mengurangi risiko penyalahgunaan data
• Pentingnya sanitasi input sebelum menyimpannya

Pembahasan ini sangat penting, terutama jika kamu membangun aplikasi web yang menangani akun pengguna, preferensi, atau aktivitas login.

1. Ancaman XSS (Cross-Site Scripting) Terhadap Web Storage

localStorage dan sessionStorage bisa diakses melalui JavaScript tanpa batasan domain selain same-origin policy.

Masalahnya: jika situs kamu rentan XSS, script berbahaya yang disuntikkan hacker bisa mengakses seluruh localStorage dan sessionStorage.

Contoh serangan XSS:

// script berbahaya
console.log(localStorage.getItem("userToken"));Code language: JavaScript (javascript)

Jika aplikasi kamu menyimpan data sensitif, token, atau informasi penting lainnya, hacker dapat:

• Mencuri data login
• Mengakses session pengguna
• Mengambil preferensi, data form, atau draft yang belum dikirim
• Mengirim data ke server mereka

XSS adalah ancaman terbesar bagi Web Storage API.

2. Data Sensitif yang Dilarang Disimpan di localStorage/sessionStorage

Berikut adalah kategori data yang tidak boleh disimpan di Web Storage:

• Password (plaintext atau hash)
  Tidak aman, bisa dicuri lewat XSS.

• Token otentikasi (JWT, OAuth Access Token, Bearer Token)
  JWT yang disimpan di localStorage adalah praktik buruk dan sudah banyak dieksploitasi attacker.

• Informasi pribadi sensitif

  • KTP / NIK
  • Alamat lengkap
  • Nomor kartu kredit
  • Data kesehatan
  • Session cookie sensitif

• Private key, API secret, encryption key
  Hanya boleh ada di server, bukan di browser!

• Data konfigurasi sistem
  Jika bocor, bisa dimanfaatkan hacker untuk memprofilkan aplikasi.

3. Cara Mengurangi Risiko Penyimpanan Data Browser

Meskipun ada risiko, Web Storage tetap aman digunakan selama kamu mengikuti best practice berikut:

Gunakan sesuai jenis data

• localStorage: data non-sensitif & non-pribadi yang sifatnya preferensi pengguna
• sessionStorage: data sementara, tidak penting, tidak sensitif

Contoh data yang aman disimpan:

• Mode tema (dark/light)
• Filter pencarian
• Posisi scroll
• Draft komentar lokal
• Preferensi tampilan tabel
• Langkah wizard (multi-step form)

Hindari menyimpan sesuatu yang menyangkut autentikasi

Jika harus menyimpan token:

• Gunakan httpOnly cookie (lebih aman)
• Tambah mekanisme CSRF protection

Terapkan Content Security Policy (CSP)

CSP membantu mencegah XSS dengan memblok script asing.

Contoh header CSP:

Content-Security-Policy: default-src 'self'; script-src 'self';Code language: JavaScript (javascript)

Lakukan Validasi & Sanitasi Input

Sebelum menyimpan data di Web Storage, pastikan data aman.

Pakai encoding atau enkripsi ringan (optional)

Ingat: ini hanya mengaburkan, bukan membuat benar-benar aman.

4. Sanitasi Input Sebelum Menyimpan Data di Web Storage

Walaupun bukan perlindungan utama, sanitasi input mencegah data berbahaya masuk ke DOM.

Contoh sanitasi dasar sebelum menyimpan komentar pengguna:

function sanitizeInput(str) {
    return str
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

const rawComment = userInput.value;
const safeComment = sanitizeInput(rawComment);

localStorage.setItem("commentDraft", safeComment);Code language: JavaScript (javascript)

Ini mencegah user menyimpan kode berbahaya seperti:

<script>alert('hack');</script>Code language: HTML, XML (xml)

Yang jika tidak disanitasi, dapat dieksekusi saat ditampilkan.

5. Studi Kasus: Sanitasi Input Komentar Blog

Misalnya kamu membuat fitur autosave komentar menggunakan localStorage. User mengetik komentar, dan aplikasi menyimpannya sementara agar tidak hilang saat refresh.

• Masalah: user bisa memasukkan HTML berbahaya.
• Solusi: Sanitasi terlebih dulu sebelum menyimpan.

Contoh Kode Lengkap

function sanitize(str) {
    return str
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
}

// autosave komentar
commentInput.addEventListener("input", () => {
    const safe = sanitize(commentInput.value);
    localStorage.setItem("commentDraft", safe);
});

// load komentar saat halaman dibuka
const savedDraft = localStorage.getItem("commentDraft");
if (savedDraft) {
    commentInput.value = savedDraft;
}Code language: JavaScript (javascript)

Keamanan Web Storage bukan hanya soal menyimpan data, tapi juga soal bagaimana menghindari penyalahgunaan data tersebut. XSS adalah ancaman paling utama—dan kamu harus selalu menghindari penyimpanan data sensitif.

Dengan memahami ancaman XSS, data yang dilarang disimpan, serta penerapan sanitasi input, kamu dapat menggunakan localStorage dan sessionStorage secara aman dalam aplikasi web modern.

Kesimpulan

Dalam tutorial ini, kamu telah mempelajari cara bekerja dengan Web Storage API, termasuk dua penyimpanan utama yang paling sering digunakan: localStorage dan sessionStorage. Kamu memahami konsep dasar penyimpanan data di browser, cara menyimpan dan mengambil data menggunakan setItem, getItem, removeItem, dan clear, serta praktik terbaik untuk pengelolaan data.

Web Storage API adalah alat yang sangat berguna untuk menyimpan data di sisi client. Namun, penting untuk memahami batasannya dan kelemahannya—terutama terhadap serangan XSS.

Dengan memahami ancaman XSS, data yang dilarang disimpan, serta penerapan sanitasi input, kamu dapat menggunakan localStorage dan sessionStorage secara aman dalam aplikasi web modern.