JSON dan LocalStorage di JavaScript: Simpan Data Lokal Tanpa Database

Tidak semua aplikasi web memerlukan database besar seperti MySQL atau MongoDB. Untuk menyimpan data sederhana seperti riwayat pencarian, daftar tugas, atau preferensi pengguna, kamu bisa memakai LocalStorage bawaan browser. Agar data bisa disimpan dan dibaca dengan benar, JavaScript menggunakan format JSON (JavaScript Object Notation). Keduanya adalah kombinasi sempurna untuk menyimpan data lokal di sisi pengguna. Untuk itu dalam tutorial kali ini kita akan bahas tentang JSON dan LocalStorage di JavaScript: Simpan Data Lokal Tanpa Database.

Apa Itu JSON?

JSON (JavaScript Object Notation) adalah format pertukaran data ringan yang mudah dibaca oleh manusia dan dipahami oleh komputer.

Contoh data JSON:

{
  "nama": "Arvi",
  "umur": 25,
  "hobi": ["Coding", "Membaca", "Traveling"]
}

Di JavaScript, JSON sering digunakan untuk:

• Menyimpan data ke LocalStorage

• Bertukar data dengan API

• Menyimpan konfigurasi aplikasi

Parse dan Stringify JSON

Karena LocalStorage hanya menyimpan data dalam bentuk teks (string), kita harus mengubah data JavaScript menjadi JSON string terlebih dahulu.

Mengubah Object ke JSON String → JSON.stringify()

const user = {
  nama: "Arvi",
  umur: 25,
  pekerjaan: "Developer"
};

const userJSON = JSON.stringify(user);
console.log(userJSON);
// Output: {"nama":"Arvi","umur":25,"pekerjaan":"Developer"}

Mengubah JSON String ke Object → JSON.parse()

const data = '{"nama":"Arvi","umur":25,"pekerjaan":"Developer"}';
const obj = JSON.parse(data);
console.log(obj.nama); // Arvi

Apa Itu LocalStorage?

LocalStorage adalah tempat penyimpanan data di browser yang tidak akan hilang meskipun halaman direfresh atau browser ditutup.

Karakteristik LocalStorage:

• Menyimpan data secara permanen (hingga dihapus manual).

• Berkapasitas sekitar 5MB per domain.

• Hanya bisa menyimpan string, bukan object langsung.

Cara Menggunakan LocalStorage

1️⃣ Menyimpan Data

Gunakan setItem(key, value)

localStorage.setItem("nama", "Arvi");

2️⃣ Mengambil Data

Gunakan getItem(key)

const nama = localStorage.getItem("nama");
console.log(nama); // Arvi

3️⃣ Menghapus Data

Gunakan removeItem(key)

localStorage.removeItem("nama");

4️⃣ Menghapus Semua Data

Gunakan clear()

localStorage.clear();

Menyimpan Data Object ke LocalStorage

Karena LocalStorage hanya menyimpan string, kamu harus menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat membaca.

const user = {
  nama: "Budi",
  umur: 30,
  kota: "Bandung"
};

// Simpan ke LocalStorage
localStorage.setItem("user", JSON.stringify(user));

// Ambil kembali
const dataUser = JSON.parse(localStorage.getItem("user"));
console.log(dataUser.nama); // Budi

Studi Kasus: Simpan Daftar Tugas (To-Do List)

Misalnya kamu ingin membuat fitur daftar tugas sederhana tanpa database:

<input type="text" id="tugas" placeholder="Tulis tugas baru...">
<button id="simpan">Simpan</button>
<ul id="daftar"></ul>

<script>
const input = document.getElementById("tugas");
const btn = document.getElementById("simpan");
const list = document.getElementById("daftar");

// Ambil data awal
let tugas = JSON.parse(localStorage.getItem("tugas")) || [];

// Fungsi tampilkan tugas
function render() {
  list.innerHTML = "";
  tugas.forEach((item, index) => {
    list.innerHTML += `<li>${item} <button onclick="hapus(${index})">❌</button></li>`;
  });
}
render();

// Simpan tugas baru
btn.addEventListener("click", () => {
  if (input.value.trim() === "") return;
  tugas.push(input.value);
  localStorage.setItem("tugas", JSON.stringify(tugas));
  input.value = "";
  render();
});

// Hapus tugas
function hapus(index) {
  tugas.splice(index, 1);
  localStorage.setItem("tugas", JSON.stringify(tugas));
  render();
}
</script>

Penjelasan singkat:

• Data disimpan ke LocalStorage dalam format JSON.

• Setiap kali halaman dimuat, daftar tugas akan muncul otomatis.

• Tidak perlu database, cukup browser saja.

Studi Kasus Lain: Simpan Tema Website

const toggle = document.getElementById("darkMode");

toggle.addEventListener("change", () => {
  document.body.classList.toggle("dark");
  localStorage.setItem("darkMode", document.body.classList.contains("dark"));
});

// Saat reload
if (localStorage.getItem("darkMode") === "true") {
  document.body.classList.add("dark");
}

Dengan cara ini, pilihan tema pengguna tetap tersimpan walaupun browser ditutup.

Kesimpulan

Fitur	Fungsi	Keterangan
JSON.stringify()	Ubah object → string	Untuk disimpan ke LocalStorage
JSON.parse()	Ubah string → object	Untuk dibaca kembali
localStorage.setItem()	Simpan data	Butuh key & value
localStorage.getItem()	Ambil data	Berdasarkan key
localStorage.removeItem()	Hapus data	Berdasarkan key

Dengan JSON dan LocalStorage, kamu bisa:

• Menyimpan data lokal tanpa backend,

• Menyediakan pengalaman pengguna yang konsisten,

• Membuat aplikasi ringan seperti To-Do List, Dark Mode, dan Pengaturan User.

Fitur ini sangat berguna untuk web offline-first dan aplikasi berbasis browser.