Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript

 

Dikesempatan kali ini, kita akan belajar bagaimana fungsi dari LocalStorage pada browser dan bagaimana cara penerapannya. untuk mempelajari localstorage ini saya akan meneruskan projek Membuat TODO list sederhana menggunakan javascript. Jadi jika ada yang masih bingung bisa pelajari postingan tentang pembuatan To Do list tersebut.

 

1. Apa itu local storage?

 

Local storage merupakan tempat di browser yang bisa digunakan utnuk menyimpan data dan data tidak akan hilang walaupun browser di close dan komputer di restart. Local storage sendiri bisa digunakan untuk menyimpan konfigurasi yang diperlukan

 

Untuk menjalankan Localstorage ini, pastikan Browser kalian support untuk penggunaan localstorage, umumnya browser terbaru seperti firefox, chrome, opera, edge memang sudah support untuk penggunaan local storage ini.

 

  2. Contoh program

Langsung saja, kita akan menggunakan program TODO list sederhana menggunakan javascript kemarin, dengan kode seperti ini.

 

pertama pada bagian paling atas javascript tambahkan 2 variabel tersebut. Fungsinya adalah pada variable todos  digunakan untuk pendeklarasian objek kosong sebagai penapung. Sedangkan namast berfungsi sebagai penamaan localstorage nanti.

 

let todos = {} // definisi object kosong penampung
    const namast = "STORAGE_TODO" // nama local storage (bebas) 

 

Buat fungsi synclocaldata  yang didalamnya terdapat perulangan switch.

  

Pada kode localStorage.setItem("nama_local", "value"); ini berfungsi untuk menyimpan data tadi kedalam penyimpanan lokal sementara pada browser. 

Setelah itu, buat fungsi createlist() yang nanti akan berisi kode untuk menampilkan daftar list saat menambahkan data list.

 

function createlist(text, status) {
        let isdone = (status) ? 'done' : ''
        let todo = "<li> <span class='"+ isdone +"' onclick='toggle(this)'> "+ text +"</span>"
         +  "<span onclick='del(this)'> [X] </span>" + "</li>"
       
        box.insertAdjacentHTML('afterbegin', todo)
    }

Jangan lupa tambahkan pemanggil fungsi 

 synclocaldata('...', el.innerText, status)

 pada toggle() dan del() seperti ini

function toggle(el) {
           let status = el.classList.toggle('done')
            synclocaldata('UPDATE', el.innerText, status) //panggil update
        }

    function del(el) {
        el.parentElement.remove()
        synclocaldata('DELETE', el.previousElementSibling.innerText.trim()) // panggil delete, untuk mnghapus item localstorage yang dipilih
    }

3. penutup

Dan inilah hasil akhir kode yang kita buat tadi.

 

 saatnya kita jalankan halaman pada browser dan coba tambahkan data lalu refresh halaman tersebut. Maka data Todo list yang kita buat tadi masih tersimpan dan tampil pada halaman tersebut.