Mengenal Session Storage dan Local Storage di Sisi Client - Perwira Learning Center

  

Mengenal Session Storage dan Local Storage di Sisi Client

 

1. Latar Belakang

    Dalam pengembangan aplikasi web modern, pengelolaan data di sisi pengguna menjadi aspek penting untuk meningkatkan kecepatan dan kenyamanan penggunaan aplikasi. Aplikasi web tidak hanya berfungsi menampilkan informasi, tetapi juga harus mampu menyimpan data sementara agar interaksi pengguna tetap berjalan dengan lancar tanpa selalu bergantung pada server.

    Sebelum hadirnya HTML5, penyimpanan data pada browser umumnya menggunakan cookies yang memiliki keterbatasan kapasitas dan kinerja. Oleh karena itu, Web Storage hadir sebagai solusi penyimpanan yang lebih efisien melalui Local Storage dan Session Storage. Pemahaman terhadap kedua teknologi ini sangat penting bagi pengembang web untuk menentukan jenis penyimpanan yang tepat sesuai kebutuhan aplikasi sebelum data disimpan secara permanen ke database server.

 

2. Alat dan Bahan

a. Perangkat Lunak

    - Web Browser (Chrome/Edge) dengan fitur Inspect Element (Network Tab).

    - Live Server: Ekstensi VS Code untuk menjalankan file HTML

    - Text Editor (VS Code) untuk melihat format JSON.

b. Perangkat Keras

     - Laptop / Komputer. 

3. Pembahasan 

3.1 Apa itu Web Storage?

    Web Storage adalah fitur pada browser modern yang memungkinkan aplikasi web menyimpan data secara lokal di dalam browser pengguna. Berbeda dengan database (MySQL) yang tersimpan di server jauh, Web Storage tersimpan di hard drive komputer pengguna itu sendiri.

Kelebihan Web Storage dibandingkan Cookies:

- Kapasitas Lebih Besar: Bisa menampung hingga 5MB - 10MB data (Cookies hanya 4KB).

- Kinerja: Data tidak dikirim bolak-balik ke server setiap kali request (lebih hemat bandwidth).

- Sederhana: Menggunakan format Key-Value Pair (Pasangan Kunci-Nilai). 

3.2 Apa itu Local Storage?

    A. Pengertian Local Storage 

    Local Storage adalah jenis penyimpanan yang bersifat persisten (menetap). Data yang disimpan di sini tidak akan hilang meskipun browser ditutup, komputer dimatikan, atau tab baru dibuka. Data hanya akan hilang jika dihapus secara manual oleh pengguna (lewat clear cache) atau melalui perintah koding (removeItem). 

- Ukuran penyimpanan: Jauh lebih besar dari cookies, biasanya 5MB hingga 10MB per domain (tergantung browser).

-  Waktu penyimpanan: Tidak ada waktu kedaluwarsa. Data yang disimpan di LocalStorage akan tetap ada sampai dihapus secara eksplisit oleh pengguna (melalui pengaturan browser) atau oleh kode JavaScript.

- Keunggulan: 

    1. Data tetap tersimpan meskipun halaman direfresh atau browser ditutup

    2. Kapasitas penyimpanan cukup besar (sekitar 5–10 MB)

    3. Mudah digunakan dengan JavaScript

    4. Tidak memerlukan koneksi server

    5. Cocok untuk menyimpan preferensi pengguna (tema, bahasa).

- Kelemahan: 

    1. Tidak aman untuk menyimpan data sensitif

    2. Data hanya bisa disimpan dalam bentuk string

    3. Tidak bisa diakses lintas domain

    4. Data tersimpan permanen hingga dihapus secara manual

    5. Rentan terhadap serangan XSS jika tidak diamankan

    B. Analogi

    Local Storage seperti mencoret dinding dengan cat. Tulisan itu akan tetap ada di sana besok, lusa, atau tahun depan, kecuali Anda sengaja mengecat ulang atau menghapusnya.   

    C. Implementasi Local Storage Menggunakan JavaScript Sederhana

    

3.3 Apa itu Session Storage? 

 A. Pengertian Local Storage 

    Session Storage mirip dengan Local Storage, namun sifatnya sementara. Data hanya bertahan selama Sesi (Session) browser aktif. Jika pengguna menutup Tab atau Jendela Browser, data akan langsung hilang/terhapus otomatis.

- Ukuran penyimpanan: Mirip dengan LocalStorage, biasanya 5MB hingga 10MB per domain.

- Waktu penyimpanan: Data yang disimpan di SessionStorage akan dihapus ketika sesi browser berakhir. Sebuah "sesi" biasanya berakhir ketika pengguna menutup tab atau jendela browser tempat website tersebut terbuka. Jika pengguna membuka tab atau jendela baru ke URL yang sama, itu akan dianggap sebagai sesi baru dan SessionStorage akan kosong.

- Keunggulan: 

            1. Data otomatis terhapus saat tab atau browser ditutup

            2. Lebih aman untuk data sementara

            3. Mudah diimplementasikan

            4. Cocok untuk menyimpan data satu sesi (form sementara, status halaman)

            5. Tidak membebani penyimpanan jangka panjang

- Kelemahan: 

    1. Data hilang saat tab ditutup atau browser ditutup

    2. Kapasitas penyimpanan terbatas

    3. Tidak cocok untuk data jangka panjang

    4. Hanya berlaku dalam satu tab

    5. Tidak bisa digunakan untuk menyimpan data permanen

    B. Analogi

    Session Storage seperti Kunci Kartu Hotel. Kartu itu hanya bisa digunakan selama Anda menginap. Begitu Anda check-out (tutup tab), kartu itu tidak berguna lagi.

    C. Implementasi Session Storage Menggunakan JavaScript Sederhana

3.4 Perbedaan Local Storage dan Session Storage 

Fitur	Local Storage	Session Storage
Durasi Data	Selamanya (sampai dihapus manual)	Hilang saat Tab/Browser ditutup
Lingkup Akses	Bisa diakses di semua Tab/Jendela	Hanya bisa diakses di Tab yang sama
Kapasitas	5MB - 10MB	5MB - 10MB
Tujuan	Data jangka panjang (Preferensi)	Data jangka pendek (Sesi aktif)

3.5 Keamanan dan Risiko

Meskipun Web Storage sangat memudahkan pekerjaan programmer, fitur ini memiliki celah keamanan yang wajib diwaspadai. 

A. Bahaya XSS (Cross-Site Scripting)

    Ini adalah risiko terbesar. Local Storage dan Session Storage dapat diakses sepenuhnya menggunakan JavaScript. Jika website Anda memiliki celah keamanan XSS, yaitu ketika hacker berhasil menyusupkan kode JavaScript jahat ke website, maka hacker tersebut dapat dengan mudah menyalin dan mencuri semua data yang ada di Local Storage pengguna.

B. Data Bersifat Plain Text (Teks Terbuka)

    Web Storage tidak mengenkripsi data. Data disimpan apa adanya. Siapapun yang meminjam laptop, membuka browser, lalu menekan F12 (Inspect Element), dapat melihat seluruh isi data yang tersimpan dengan jelas.

C. Apa yang boleh dan tidak boleh disimpan?

Boleh disimpan:

- Preferensi user seperti tema gelap atau terang

- Status sidebar (buka atau tutup

- Data keranjang belanja sementara

- Token sesi yang tidak kritikal

Tidak boleh disimpan:

- Password

- PIN

- Nomor kartu kredit

- Data KTP

- Informasi pribadi yang sangat rahasia

3.6 Kapan Menggunakan Local Storage dan Session Storage?

Sebagai pengembang, pemilihan jenis penyimpanan yang tepat akan mempengaruhi kenyamanan pengguna. Berikut panduannya:

Gunakan Local Storage jika:

1. Data harus tersimpan dalam jangka waktu lama, meskipun browser ditutup dan dibuka kembali.

2. Digunakan untuk fitur personalisasi seperti pengaturan tampilan (ukuran font, mode malam).

3. Digunakan untuk menyimpan data draft, misalnya tulisan blog atau komentar yang belum selesai.

4. Digunakan untuk menyimpan keranjang belanja pengguna non-login (guest).

Gunakan Session Storage jika:

1. Data bersifat sementara dan hanya diperlukan selama tab browser masih terbuka.

2. Digunakan pada formulir bertingkat (multi-step form) agar data antar halaman tidak hilang.

3. Digunakan untuk menyimpan filter pencarian sementara, seperti pengurutan harga atau kategori.

3.7 Kesimpulan

    Web Storage yang terdiri dari Local Storage dan Session Storage merupakan solusi penyimpanan data di sisi klien yang ringan, cepat, dan mudah diimplementasikan. Perbedaan utama keduanya terletak pada durasi penyimpanan. Local Storage bersifat permanen hingga dihapus secara manual, sedangkan Session Storage bersifat sementara dan akan terhapus saat tab browser ditutup.

    Untuk kebutuhan penyimpanan data yang permanen, aman, berkapasitas besar, dan dapat diakses dari berbagai perangkat, diperlukan penyimpanan di sisi server berupa database. Oleh karena itu, pembahasan selanjutnya akan berfokus pada konsep database menggunakan MySQL.

4. Daftar Pustaka  

blog.sarbeh.com. (2023, August 21). Perbedaan Local Storage, Session Storage, dan Cookie Storage. https://blog.sarbeh.com/posts/local-storage-dan-session-storage-atau-cookie-storage/ (blog.sarbeh.com)

Mahir.dev. (n.d.). Web Storage (localStorage fokus). https://mahir.dev/belajar/javascript/web-storage-localstorage-fokus (Mahir.dev)

W3Schools. (n.d.). HTML Web Storage API. https://www.w3schools.com/html/html5_webstorage.asp (w3schools.com)

Ramotion. (2025). What is Web Storage: Types, Tips & Use Cases. https://www.ramotion.com/blog/what-is-web-storage/ (ramotion.com)

freeCodeCamp.org. (n.d.). How Web Storage Works – Local vs Session Storage Explained. https://www.freecodecamp.org/news/how-web-storage-works/ (FreeCodeCamp)

W3Schools. (n.d.). HTML Web Storage. https://www.w3schools.com/html/html5_webstorage.asp (terjemahan/akses ulang) (w3schools.com)

BarajaCoding.or.id. (n.d.). Pengertian serta Perbedaan LocalStorage dan SessionStorage. https://www.barajacoding.or.id/pengertian-serta-perbedaan-localstorage-dan-sessionstorage/