Tutorial JavaScript: Cara Menyimpan Data To-Do List ke LocalStorage Browser
Halo semua! Pada artikel sebelumnya, kita sudah berhasil membuat Aplikasi To-Do List sederhana menggunakan HTML, CSS, dan JavaScript vanilla. Namun, ada satu kekurangan: saat halaman web di-refresh, semua daftar tugas yang sudah kita catat akan hilang begitu saja.
Nah, di artikel lanjutan ini, kita akan menyelesaikan tantangan kedua, yaitu menyimpan data tugas secara permanen di browser menggunakan LocalStorage. Dengan fitur ini, daftar tugasmu akan tetap aman meskipun browser ditutup atau komputer dimatikan!
Apa itu LocalStorage?
LocalStorage adalah fitur bawaan browser modern yang memungkinkan kita menyimpan data berupa pasangan kunci dan nilai (key-value pairs) secara lokal di sisi pengguna.
Data yang disimpan di LocalStorage tidak memiliki batas waktu kedaluwarsa, sehingga akan terus tersimpan sampai dihapus secara sengaja lewat kode atau pembersihan data browser.
Memperbarui Kode JavaScript (script.js)
Untuk menerapkan LocalStorage, kita perlu mengubah pendekatan pembuatan elemen. Alih-alih langsung membuat elemen HTML saat tombol diklik, kita akan menyimpan teks tugas ke dalam sebuah Array, lalu menyimpannya ke LocalStorage.
Setelah itu, kita buat fungsi untuk merender ulang isi Array tersebut ke layar. Maka dari itu silakan ganti seluruh isi file script.js lama kamu (pada postingan sebelumnya) dengan kode baru di bawah ini:
Loading...
// 1. Ambil elemen HTML yang dibutuhkan
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// 2. Ambil data dari LocalStorage saat halaman pertama kali dimuat
// Jika LocalStorage kosong, inisialisasi dengan Array kosong []
let tasks = JSON.parse(localStorage.getItem('myTasks')) || [];
// 3. Fungsi untuk menampilkan (render) semua tugas ke layar
function renderTasks() {
// Kosongkan isi ul terlebih dahulu agar tidak duplikat
taskList.innerHTML = "";
// Loop setiap tugas di dalam array
tasks.forEach((taskText, index) => {
const li = document.createElement('li');
li.textContent = taskText;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Hapus';
deleteBtn.className = 'delete-btn';
// Fungsi hapus berdasarkan index array
deleteBtn.onclick = function() {
deleteTask(index);
};
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
// 4. Fungsi untuk menambah tugas baru ke dalam Array & LocalStorage
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") {
alert("Silakan tulis tugas terlebih dahulu!");
return;
}
// Masukkan tugas baru ke array
tasks.push(taskText);
// Simpan array terbaru ke LocalStorage (harus diubah ke string JSON)
localStorage.setItem('myTasks', JSON.stringify(tasks));
// Perbarui tampilan layar
renderTasks();
// Reset input
taskInput.value = "";
taskInput.focus();
}
// 5. Fungsi untuk menghapus tugas dari Array & LocalStorage
function deleteTask(index) {
// Hapus 1 data dari array berdasarkan indexnya
tasks.splice(index, 1);
// Simpan kembali array yang sudah dikurangi ke LocalStorage
localStorage.setItem('myTasks', JSON.stringify(tasks));
// Perbarui tampilan layar
renderTasks();
}
// 6. Event Listeners untuk mendengarkan aksi user
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTask();
}
});
// 7. Jalankan fungsi render pertama kali saat halaman dibuka
renderTasks();Bagaimana Cara Kerjanya?
- JSON.stringify(tasks): LocalStorage hanya bisa menyimpan data dalam bentuk teks (string). Karena tasks berbentuk Array, kita perlu mengubahnya menjadi string berformat JSON sebelum menyimpannya dengan localStorage.setItem().
- JSON.parse(...): Saat kita mengambil data dari LocalStorage menggunakan localStorage.getItem(), datanya masih berupa string teks. Kita menggunakan JSON.parse() untuk mengubah teks tersebut kembali menjadi Array JavaScript agar bisa diolah (di-loop atau ditambah).
- tasks.splice(index, 1): Fungsi ini digunakan untuk menghapus satu elemen di dalam array berdasarkan posisi (index) baris tugas yang diklik oleh pengguna.
Kesimpulan
Dengan menambahkan beberapa baris kode di atas, aplikasi To-Do List kamu sekarang sudah jauh lebih interaktif dan fungsional seperti aplikasi nyata! Kamu sudah belajar cara mengelola data state (Array), melakukan sinkronisasi dengan penyimpanan browser, dan merender elemen secara dinamis berdasarkan data tersebut.
Sampai di sini, fitur apa lagi yang ingin kamu tambahkan? Konsep idemu di notepad, dan mari kita bedah kodenya bersama di artikel berikutnya! Selamat mencoba!
