Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Dalam sebuah website atau aplikasi, kamu bisa mengubah tema yang awalnya terang (light) menjadi gelap (dark) dan sebaliknya. Fitur mengubah tema dark/light pada website ini sangat berguna untuk kenyamanan dan pengalaman user, terutama dalam kondisi yang pencahayaannya berbeda.
Kendala yang sering dialami adalah tema yang dipilih akan menghilang ketika halaman dimuat ulang. Masalah ini terjadi karena data tema tidak disimpan secara permanen. Dengan menggunakan Local Storage dapat membantu preferensi data tema user dapat tersimpan dengan baik di device-nya, walaupun halaman dimuat ulang maupun keluar.
Pada artikel ini, kita akan membahas cara menangani kendala di atas saat mengubah tema dark/ligt website dengan Local Storage.
Local Storage adalah sebuah cara untuk menyimpan data pengguna secara permanen di device user.
Data yang disimpan di Local Storage akan bersifat persisten, yang artinya data tersebut akan tetap ada meski browser ditutup atau halaman dimuat ulang. Data hanya akan hilang jika dihapus secara secara manual oleh pengguna atau aplikasi.
Untuk mengetahui lebih lengkap terkait Local Storage, kamu bisa baca artikel berikut ini:
Sebelum beranjak ke langkah-langkah, perhatikan gambar proses mengubah tema dengan Local Storage pada gambar berikut:
Pada gambar di atas, proses mengubah tema melalui beberapa langkah:
Ilustrasi pada gambar di atas menjadi gambaran agar mempermudah kamu dalam memahami langkah-langkah mengubah tema dengan Local Storage berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dark/Light Mode</title>
<style>
body.light {
background-color: #ffffff;
color: #000000;
}
body.dark {
background-color: #000000;
color: #ffffff;
}
</style>
</head>
<body class="light">
<button id="thema">Dark/Light</button>
<script src="script.js"></script>
</body>
</html>Penjelasan Kode:
<body>, kode di atas menggunakan class="light" sebagai tema utama atau default website yang akan diterapkan pada elemen <body>.id="thema" sebagai tombol yang digunakan user untuk mengganti tema.const toggleButton = document.getElementById('thema');
const currentTheme = localStorage.getItem('theme') || 'light';
document.body.className = currentTheme;
toggleButton.addEventListener('click', () => {
const newTheme = document.body.className === 'light' ? 'dark' : 'light';
document.body.className = newTheme;
localStorage.setItem('theme', newTheme);
});Penjelasan Kode:
id="thema" pada halaman html dipanggil menggunakan elemen document.getElementById.
localStorage.getItem('theme') || 'light';
Penggunaan getItem di atas untuk mendapatkan data yang sudah disimpan di Local Storage, agar saat tidak ada data yang tersimpan, maka halamana akan otomatis tetap default ke tema 'light'.
Untuk menerapkan tema saat halaman dimuat, kita menggunakan document.body.className = currentTheme; yang nantinya akan mengubah elemen<body> sesuai dengan tema yang dipilih.
Agar tombol <button id="thema">Dark/Light</button> pada halaman HTML bekerja, kamu perlu menuliskan addEventListener('click',.
Agar saat halaman dimuat ulang atau keluar, tema yang dipilih user tidak hilang, kamu perlu menuliskan .setItem yang nantinya akan disimpan kembali di Local Storage dengan localStorage.setItem('theme', newTheme);.
Dengan menggunakan kode .getItem dan .setItem, tema website yang dipilih user akan tetap tersimpan, walau user muat ulang atau mengeluarkan halaman. Ini adalah cara yang efisien dan sederhana untuk menyimpan preferensi tema dark/light sesuai yang dipilih user menggunakan Local Storage
Menggunakan Local Storage membantu meningkatkan pengalaman user terhadap website yang kamu buat secara signifikan. Cara kerja Local Storage yang efisien karena tidak memerlukan permintaan ke server untuk menyimpan permintaan user. API-nya yang sederhana memudahkan developer dalam menggunakan fitur tersebut. Namun, perlu diperhatikan untuk tidak menyimpan data sensitif di Local Storage.
Semoga artikel ini bermanfaat dan semangat belajar, Sobat Skodev!
I am a Bachelor of Indonesian Literature at Diponegoro University who has experience as a Content Creator, Copy Writer and Copy Writer
Link terkait: