Cara Menggunakan Local Storage di JavaScript

Pernahkah kamu mengunjungi sebuah website, mengisi preferensi atau mode gelap, lalu kembali lagi besoknya dan semua pengaturan masih tersimpan? Itu bisa dilakukan menggunakan Local Storage — sebuah fitur browser bawaan yang memungkinkan aplikasi web menyimpan data langsung di browser pengguna. Tidak perlu database, tidak perlu server — data tersimpan secara lokal dan persisten.

Apa Itu Local Storage?

Local Storage adalah bagian dari Web Storage API yang memungkinkan kita menyimpan data dalam format key-value di browser. Data yang tersimpan bersifat persisten — tidak akan hilang meski browser ditutup atau komputer di-restart. Setiap domain memiliki ruang penyimpanan terpisah, dan kapasitasnya sekitar 5-10 MB per domain.

• Local Storage — data tetap ada hingga dihapus secara manual.
• Session Storage — data hilang saat tab/browser ditutup.

Menyimpan Data (setItem)

Gunakan localStorage.setItem(key, value) untuk menyimpan data. Perlu diingat bahwa nilai harus berupa string:

// Menyimpan data sederhana (string)
localStorage.setItem('tema', 'gelap');
localStorage.setItem('bahasa', 'indonesia');
localStorage.setItem('versi', '2.1.0');

// Menyimpan angka (otomatis dikonversi ke string)
localStorage.setItem('volume', 75);

// Menyimpan objek atau array — HARUS dikonversi ke JSON dulu
const pengaturan = {
  tema: 'gelap',
  bahasa: 'id',
  notifikasi: true,
  fontSize: 16
};

localStorage.setItem('pengaturan', JSON.stringify(pengaturan));

// Menyimpan array
const riwayatPencarian = ['javascript', 'react', 'node.js'];
localStorage.setItem('riwayat', JSON.stringify(riwayatPencarian));

Mengambil Data (getItem)

Gunakan localStorage.getItem(key) untuk mengambil data. Jika key tidak ada, hasilnya adalah null:

// Mengambil data sederhana
const tema = localStorage.getItem('tema');
console.log(tema); // 'gelap'

// Mengambil data yang tidak ada
const warna = localStorage.getItem('warna');
console.log(warna); // null

// Mengambil objek — HARUS di-parse dari JSON
const pengaturanRaw = localStorage.getItem('pengaturan');
const pengaturan = JSON.parse(pengaturanRaw);
console.log(pengaturan.tema); // 'gelap'
console.log(pengaturan.notifikasi); // true

// Cara aman jika data mungkin null
const riwayatRaw = localStorage.getItem('riwayat');
const riwayat = riwayatRaw ? JSON.parse(riwayatRaw) : [];
console.log(riwayat); // ['javascript', 'react', 'node.js'] atau []

Menghapus Data

// Hapus satu item berdasarkan key
localStorage.removeItem('bahasa');

// Hapus SEMUA data di Local Storage (hati-hati!)
localStorage.clear();

// Cek jumlah item yang tersimpan
console.log(localStorage.length); // angka jumlah key

// Loop semua key yang ada
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

Contoh Nyata: Dark Mode Persisten

Implementasi umum adalah menyimpan preferensi tema pengguna:

// Saat halaman dimuat, terapkan tema yang tersimpan
function terapkanTema() {
  const tema = localStorage.getItem('tema') || 'terang'; // default: terang
  document.body.classList.toggle('dark-mode', tema === 'gelap');
  document.getElementById('btn-tema').textContent =
    tema === 'gelap' ? '☀️ Mode Terang' : '🌙 Mode Gelap';
}

// Toggle tema saat tombol diklik
function toggleTema() {
  const temaSekarang = localStorage.getItem('tema') || 'terang';
  const temaBaru = temaSekarang === 'terang' ? 'gelap' : 'terang';
  localStorage.setItem('tema', temaBaru);
  terapkanTema();
}

document.getElementById('btn-tema').addEventListener('click', toggleTema);
document.addEventListener('DOMContentLoaded', terapkanTema);

Contoh Nyata: Menyimpan To-Do List

const STORAGE_KEY = 'todo-list';

// Ambil data dari storage
function ambilTugas() {
  const data = localStorage.getItem(STORAGE_KEY);
  return data ? JSON.parse(data) : [];
}

// Simpan data ke storage
function simpanTugas(daftarTugas) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(daftarTugas));
}

// Tambah tugas baru
function tambahTugas(teks) {
  const tugas = ambilTugas();
  tugas.push({ id: Date.now(), teks, selesai: false });
  simpanTugas(tugas);
  renderTugas();
}

// Tandai selesai
function toggleSelesai(id) {
  const tugas = ambilTugas().map(t =>
    t.id === id ? { ...t, selesai: !t.selesai } : t
  );
  simpanTugas(tugas);
  renderTugas();
}

// Render ke halaman
function renderTugas() {
  const tugas = ambilTugas();
  const ul = document.getElementById('daftar-tugas');
  ul.innerHTML = tugas.map(t => `
    <li style="text-decoration: ${t.selesai ? 'line-through' : 'none'}"
        onclick="toggleSelesai(${t.id})">
      ${t.teks}
    </li>
  `).join('');
}

document.addEventListener('DOMContentLoaded', renderTugas);

Batasan dan Hal yang Perlu Diperhatikan

• Local Storage hanya bisa menyimpan string. Selalu gunakan JSON.stringify() untuk objek/array.
• Jangan simpan data sensitif seperti password atau token JWT di Local Storage karena rentan terhadap serangan XSS.
• Kapasitas terbatas sekitar 5-10 MB — tidak cocok untuk data besar.
• Local Storage bersifat synchronous, yang bisa memblokir main thread jika data terlalu besar.

Kesimpulan

Local Storage adalah solusi mudah dan cepat untuk menyimpan data pengguna di browser tanpa server. Sangat cocok untuk preferensi tampilan, data sementara, atau state aplikasi ringan. Selalu ingat untuk menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat mengambil data berbentuk objek atau array, dan hindari menyimpan informasi sensitif di dalamnya.