Langsung ke konten

Web Storage di HTML: Local Storage vs Session Storage

Pelajari Web Storage di HTML dengan localStorage dan sessionStorage. Pahami perbedaan, cara penggunaan, dan contoh praktis menyimpan data di browser.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami Canvas dan SVG, kita bahas Web Storage. Cara menyimpan data di browser pengguna tanpa perlu server.

Apa itu Web Storage?

Web Storage adalah fitur HTML5 untuk menyimpan data di browser pengguna. Ada dua jenis: localStorage dan sessionStorage.

Web Storage cocok untuk:

  • Menyimpan preferensi pengguna
  • Menyimpan data form sementara
  • Menyimpan status login
  • Menyimpan data aplikasi

Local Storage vs Session Storage

AspeklocalStoragesessionStorage
DurasiPermanen (sampai dihapus)Sesi browser (tab)
ScopePer domainPer tab
Otomatis hapusTidakSaat tab ditutup
Ukuran~5-10MB~5MB

localStorage

Menyimpan Data

// Simpan data
localStorage.setItem('nama', 'Budi');
localStorage.setItem('umur', '25');
localStorage.setItem('user', JSON.stringify({ nama: 'Budi', umur: 25 }));

Mengambil Data

// Ambil data
const nama = localStorage.getItem('nama'); // 'Budi'
const umur = localStorage.getItem('umur'); // '25'
const user = JSON.parse(localStorage.getItem('user')); // { nama: 'Budi', umur: 25 }

Menghapus Data

// Hapus satu item
localStorage.removeItem('nama');

// Hapus semua data
localStorage.clear();

Mengecek Data

// Cek apakah ada
if (localStorage.getItem('nama')) {
  console.log('Data ada');
}

// Jumlah item
const jumlah = localStorage.length;

sessionStorage

Cara penggunaan sama dengan localStorage:

// Simpan
sessionStorage.setItem('theme', 'dark');
sessionStorage.setItem('token', 'abc123');

// Ambil
const theme = sessionStorage.getItem('theme');

// Hapus
sessionStorage.removeItem('theme');
sessionStorage.clear();

Contoh Praktis

1. Menyimpan Tema

// Simpan tema yang dipilih
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  document.body.className = theme;
}

// Ambil tema saat halaman dimuat
function loadTheme() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.body.className = savedTheme;
}

loadTheme();

<button onclick="setTheme('light')">Light Mode</button>
<button onclick="setTheme('dark')">Dark Mode</button>

2. Menyimpan Form

// Auto-save form
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, textarea');

// Simpan setiap perubahan
inputs.forEach(input => {
  input.addEventListener('input', () => {
    localStorage.setItem(`form_${input.name}`, input.value);
  });
});

// Muat data saat halaman dimuat
window.addEventListener('load', () => {
  inputs.forEach(input => {
    const saved = localStorage.getItem(`form_${input.name}`);
    if (saved) input.value = saved;
  });
});

// Hapus setelah submit
form.addEventListener('submit', () => {
  inputs.forEach(input => {
    localStorage.removeItem(`form_${input.name}`);
  });
});

3. Menyimpan Token Login

// Login
function login(username, token) {
  sessionStorage.setItem('username', username);
  sessionStorage.setItem('token', token);
}

// Cek status login
function isLoggedIn() {
  return sessionStorage.getItem('token') !== null;
}

// Logout
function logout() {
  sessionStorage.clear();
  window.location.href = '/login';
}

4. Counter Kunjungan

// Hitung kunjungan
function hitungKunjungan() {
  let count = localStorage.getItem('kunjungan') || 0;
  count = parseInt(count) + 1;
  localStorage.setItem('kunjungan', count);
  return count;
}

// Tampilkan
const kunjungan = hitungKunjungan();
document.getElementById('counter').textContent = `Kunjungan ke-${kunjungan}`;

Menyimpan Data Kompleks

Array dan Object

// Simpan array
const buah = ['apel', 'pisang', 'mangga'];
localStorage.setItem('buah', JSON.stringify(buah));

// Ambil array
const savedBuah = JSON.parse(localStorage.getItem('buah'));

// Simpan object
const user = {
  nama: 'Budi',
  email: '[email protected]',
  hobi: ['coding', 'gaming']
};
localStorage.setItem('user', JSON.stringify(user));

// Ambil object
const savedUser = JSON.parse(localStorage.getItem('user'));

Event Storage

localStorage memancarkan event saat berubah:

window.addEventListener('storage', (e) => {
  console.log('Key:', e.key);
  console.log('Old value:', e.oldValue);
  console.log('New value:', e.newValue);
});

Event ini berguna untuk sinkronisasi antar tab.

Keamanan Web Storage

Yang Perlu Diketahui

  1. Tidak aman untuk data sensitif — Token, password, dll bisa diakses JavaScript
  2. Bisa dihapus pengguna — Melalui DevTools
  3. Tidak di-encrypt — Data tersimpan dalam bentuk teks

Tips Keamanan

// ❌ Jangan simpan data sensitif
localStorage.setItem('password', 'rahasia123');

// ✅ Simpan data non-sensitif
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'id');

// ✅ Untuk token, gunakan httpOnly cookie

Kapan Menggunakan localStorage vs sessionStorage?

KebutuhanGunakan
Tema penggunalocalStorage
BahasalocalStorage
PreferensilocalStorage
Token loginsessionStorage
Data form sementarasessionStorage
Keranjang belanjalocalStorage
Status sesisessionStorage

Alternatif: IndexedDB

Untuk data yang lebih besar atau kompleks, gunakan IndexedDB:

// IndexedDB lebih powerful tapi lebih kompleks
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (e) => {
  const db = e.target.result;
  // Operasi database
};

Ringkasan

  • localStorage — Data permanen, scope per domain
  • sessionStorage — Data sementara (per tab), hilang saat tab ditutup
  • Gunakan setItem(), getItem(), removeItem(), clear()
  • Simpan data kompleks dengan JSON.stringify() dan JSON.parse()
  • Tidak aman untuk data sensitif
  • Untuk data besar, gunakan IndexedDB

Penutup

Kamu sudah memahami Web Storage di HTML. Dengan localStorage dan sessionStorage, kamu bisa menyimpan data di browser pengguna tanpa perlu server.

Di modul selanjutnya, kita akan belajar tentang Clean Code HTML dan Accessibility, cara menulis kode HTML yang bersih dan accessible.