Rahasia LocalStorage: Membuat Website Mengingat Pengunjung

Halo Sobat Jurnal Coding! Masih ingat dengan proyek Tombol Dark Mode yang kita buat di artikel sebelumnya? Fitur itu sangat keren dan membuat website kita terlihat seperti aplikasi masa depan, bukan?

Tapi, mari kita jujur, ada satu masalah kecil yang sangat menjengkelkan. Coba kamu aktifkan mode gelapnya, lalu muat ulang (refresh) halaman peramban (browser) kamu. Apa yang terjadi? Ya, layarnya kembali menjadi putih menyilaukan! Pengunjung harus mengeklik tombol mode gelap itu berkali-kali setiap kali mereka berpindah halaman. Sangat merepotkan dan merusak pengalaman membaca.

Mengapa hal ini terjadi? Karena variabel di dalam JavaScript menderita penyakit amnesia jangka pendek.

Setiap kali halaman dimuat ulang, komputer akan mereset dan menghapus seluruh ingatan JavaScript kembali ke kondisi nol. Untuk mengatasi masalah amnesia ini, kita membutuhkan sebuah buku harian permanen yang ditanamkan langsung ke dalam browser pengunjung. Buku harian ajaib ini bernama: LocalStorage.

### Apa Itu LocalStorage? (Analogi Buku Harian)

Jika variabel biasa adalah ingatan di dalam kepala yang akan hilang saat kamu tertidur (halaman di-refresh), maka LocalStorage adalah sebuah Buku Harian fisik yang kamu simpan di dalam laci mejamu.

Ketika kamu menuliskan sesuatu di dalam buku harian tersebut, tulisan itu tidak akan pernah hilang meskipun kamu pergi tidur, mematikan komputer, atau mencabut kabel listrik. Saat besok paginya kamu bangun dan membuka laci tersebut, tulisanmu masih ada di sana dengan utuh.

Di dunia pemrograman web, LocalStorage adalah tempat penyimpanan data berukuran kecil (sekitar 5 Megabyte) yang disediakan oleh Google Chrome, Mozilla Firefox, atau Safari khusus untuk website-mu. Data ini disimpan langsung di dalam perangkat (laptop atau HP) milik pengunjung, bukan di server database seperti MySQL.

### Cara Menulis dan Membaca Buku Harian LocalStorage

Cara menggunakan LocalStorage di JavaScript sangatlah elegan dan semudah bahasa manusia sehari-hari. Ia bekerja menggunakan sistem Kunci dan Nilai (Key and Value), persis seperti Object yang sudah kita pelajari.

Mari kita lihat 3 mantra sakti untuk mengendalikan LocalStorage:

// 1. Mantra Menyimpan Data (Menulis di Buku Harian)

// Kita membuat kunci bernama "tema_pilihan" dan mengisinya dengan "gelap"

localStorage.setItem("tema_pilihan", "gelap");

// 2. Mantra Mengambil Data (Membaca Buku Harian)

let temaSaatIni = localStorage.getItem("tema_pilihan");

console.log("Tema yang sedang dipakai adalah: " + temaSaatIni);

// 3. Mantra Menghapus Data (Merobek Halaman Buku Harian)

localStorage.removeItem("tema_pilihan");

Sangat mudah dipahami, bukan?

Sekarang, mari kita terapkan sihir ini ke proyek Dark Mode kita sebelumnya. Logikanya seperti ini: Saat pengunjung mengeklik tombol Dark Mode, kita tidak hanya mengubah warna layar, tetapi kita juga menyuruh JavaScript untuk menuliskan kata "gelap" ke dalam LocalStorage.

Lalu, di bagian paling atas kode JavaScript kita, kita membuat sebuah sistem satpam pengecek. Saat halaman pertama kali dimuat, satpam ini akan langsung membaca LocalStorage: "Permisi, apakah sebelumnya pengunjung ini sudah memilih mode gelap? Jika ya, langsung hitamkan layarnya sebelum dia sadar!"

// KODE PENYEMPURNAAN DARK MODE

const layarWeb = document.body;

const tombolTema = document.getElementById("tombol-tema");

// Satpam Pengecek: Dijalankan otomatis saat web pertama kali dibuka

if (localStorage.getItem("status_tema") === "mode_malam") {

    layarWeb.classList.add("tema-gelap");

    tombolTema.innerText = "☀️ Aktifkan Mode Terang";

}

// Logika saat tombol diklik

tombolTema.addEventListener("click", function() {

    layarWeb.classList.toggle("tema-gelap");

    if (layarWeb.classList.contains("tema-gelap")) {

        tombolTema.innerText = "☀️ Aktifkan Mode Terang";

        // Catat di buku harian!

        localStorage.setItem("status_tema", "mode_malam");

    } else {

        tombolTema.innerText = "🌙 Aktifkan Mode Gelap";

        // Catat di buku harian!

        localStorage.setItem("status_tema", "mode_siang");

    }

});

Dengan penambahan kode ini, website kamu resmi menjadi aplikasi cerdas yang peduli pada preferensi penggunanya. Kamu bisa menutup browser, mematikan laptop, dan membukanya lagi besok pagi, dan website-mu akan tetap menyapamu dalam balutan warna gelap yang elegan.

Kehebatan LocalStorage tidak hanya berhenti pada Dark Mode. Di artikel proyek selanjutnya, kita akan memanfaatkan ruang penyimpanan ini untuk membangun aplikasi yang jauh lebih canggih: Buku Catatan Harian Pribadi! Bersiaplah!