CRUD JavaScript dengan LocalStorage (Data Permanen)

Biasanya, data CRUD disimpan di server database seperti MySQL. Namun, untuk latihan atau proyek kecil, kita bisa menyimpan data secara lokal di browser menggunakan LocalStorage. Untuk itu dalam tutorial kali ini kita akan bahas tentang CRUD JavaScript dengan LocalStorage (Data Permanen).

Dengan LocalStorage:

Data tetap tersimpan walau halaman direfresh.
Tidak butuh koneksi internet atau server.
Cocok untuk mini project seperti todolist, daftar produk, atau kontak.

Struktur HTML CRUD

Buat file index.html berikut:

<h2> Daftar Produk (CRUD + LocalStorage)</h2>

<form id="productForm">
  <input type="hidden" id="editIndex">
  <input type="text" id="name" placeholder="Nama Produk" required>
  <input type="number" id="price" placeholder="Harga Produk" required>
  <button type="submit">Simpan</button>
</form>

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama Produk</th>
      <th>Harga</th>
      <th>Aksi</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<script src="app.js"></script>

Menyiapkan LocalStorage dan Variabel

Buat file app.js dan mulai dengan kode berikut:

let products = JSON.parse(localStorage.getItem("products")) || [];

const form = document.getElementById("productForm");
const nameInput = document.getElementById("name");
const priceInput = document.getElementById("price");
const tableBody = document.getElementById("tableBody");
const editIndex = document.getElementById("editIndex");

Penjelasan:

Data products diambil dari LocalStorage.
Jika belum ada data, maka diisi array kosong ([]).

Fungsi untuk Menampilkan Data ke Tabel

function renderTable() {
  tableBody.innerHTML = "";

  products.forEach((p, i) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${i + 1}</td>
      <td>${p.name}</td>
      <td>Rp ${p.price.toLocaleString()}</td>
      <td>
        <button onclick="editProduct(${i})">Edit</button>
        <button onclick="deleteProduct(${i})">Hapus</button>
      </td>
    `;
    tableBody.appendChild(row);
  });

  localStorage.setItem("products", JSON.stringify(products));
}

Keterangan:

Data products di-loop dan ditampilkan di tabel.
Setiap kali render, data juga disimpan ulang ke LocalStorage.

Menambahkan & Mengedit Data (Create + Update)

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const name = nameInput.value.trim();
  const price = parseInt(priceInput.value.trim());

  if (!name || !price) return alert("Lengkapi semua field!");

  const data = { name, price };

  if (editIndex.value === "") {
    // Tambah baru
    products.push(data);
  } else {
    // Edit data
    products[editIndex.value] = data;
    editIndex.value = "";
  }

  form.reset();
  renderTable();
});

Fungsi Edit Data

function editProduct(index) {
  const p = products[index];
  nameInput.value = p.name;
  priceInput.value = p.price;
  editIndex.value = index;
}

Saat tombol “Edit” diklik:

Data produk dimasukkan ke form.
Nilai index disimpan untuk memperbarui data yang sesuai.

Menghapus Data (Delete)

function deleteProduct(index) {
  if (confirm("Yakin ingin menghapus data ini?")) {
    products.splice(index, 1);
    renderTable();
  }
}

Data langsung dihapus dari array, lalu tabel di-refresh dan LocalStorage diperbarui otomatis.

Menjalankan Fungsi Awal

renderTable();

Letakkan di akhir file agar data langsung tampil saat halaman dibuka.

Styling Tambahan (Opsional)

Tambahkan gaya agar tampilan lebih rapi:

<style>
body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 40px auto;
}

form {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

input, button {
  padding: 8px;
  font-size: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

th {
  background: #f4f4f4;
}
</style>

Cara Kerja LocalStorage

LocalStorage adalah penyimpanan permanen di browser. Kamu bisa lihat datanya di Developer Tools → Application → Local Storage.

Fungsi utama:

localStorage.setItem("key", JSON.stringify(data)); // Simpan data
JSON.parse(localStorage.getItem("key")); // Ambil data
localStorage.removeItem("key"); // Hapus data

Hasil Akhir

✅ Tambah produk baru
✅ Edit data langsung dari form
✅ Hapus data dengan konfirmasi
✅ Semua perubahan tersimpan permanen di LocalStorage

Ide Pengembangan

Kamu bisa menambahkan:

Fitur pencarian dan sorting (gabungkan dari artikel sebelumnya)
Tanggal input otomatis
Ekspor ke file .csv
Dark Mode toggle agar tampilannya modern

Kesimpulan

Dengan JavaScript murni dan LocalStorage, kamu bisa membuat aplikasi CRUD yang:

Tidak butuh database
Bisa dijalankan offline
Data tetap tersimpan bahkan setelah browser ditutup

Cocok untuk latihan, dashboard mini, atau aplikasi lokal tanpa server.