Cara Menyimpan Data di localStorage dengan JavaScript

localStorage menyimpan data di browser secara permanen tanpa dikirim ke server, ideal untuk preferensi tema, keranjang belanja sementara, atau draf tulisan. Artikel ini membahas cara menyimpan data di localStorage dengan JavaScript.

Simpan, Baca, Hapus

<script>
localStorage.setItem("tema", "gelap");     // simpan
console.log(localStorage.getItem("tema")); // baca: "gelap"
localStorage.removeItem("tema");           // hapus satu
localStorage.clear();                      // hapus semua
</script>

Contoh Kasus: Menyimpan Objek (Keranjang Belanja)

<script>
const keranjang = [{ id: 1, nama: "Kopi" }];
localStorage.setItem("keranjang", JSON.stringify(keranjang)); // simpan
const kembali = JSON.parse(localStorage.getItem("keranjang")); // baca
</script>

localStorage hanya menyimpan string, jadi objek harus diubah dengan JSON.stringify() saat disimpan dan JSON.parse() saat dibaca.

Contoh Kasus: Draf Otomatis Tersimpan

<script>
const textarea = document.getElementById("tulisan");
textarea.value = localStorage.getItem("draf") || "";
textarea.addEventListener("input", function() {
    localStorage.setItem("draf", this.value); // simpan tiap ketikan
});
</script>

Kesimpulan

Gunakan localStorage untuk menyimpan data permanen di sisi klien. Karena hanya menyimpan string, gunakan JSON.stringify()/JSON.parse() untuk objek. Sangat berguna untuk preferensi atau draf otomatis.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *