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.
Daftar isi
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:
Aplikasi Web Semakin Kompleks
Banyak aplikasi modern memerlukan data kecil untuk bertahan (persist) tanpa bergantung pada server.Mengurangi Overhead Server
Dengan menyimpan data kecil di browser, server tidak perlu menangani data yang dapat dikelola sendiri oleh user.Memberikan User Experience yang Lebih Baik
Contohnya:- Data tetap aman saat halaman di-refresh
- Pengaturan tetap tersimpan
- Riwayat pencarian tidak hilang
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()atauclear()
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:
- Saat user membuka halaman → cek apakah ada currentStep dalam sessionStorage.
- Jika tidak ada (pertama kali membuka halaman) → mulai dari step 1.
- Setiap klik tombol Next → step disimpan ke sessionStorage.
- Jika user refresh halaman → wizard kembali ke langkah terakhir.
- 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, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
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, "<")
.replace(/>/g, ">");
}
// 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.
