Cara Membuat Aplikasi TodoList Vue JS Part 6

26/08/2017    Ekky Ridyanto    755     Website

Hai semuanya tentu kita akan lanjutkan kembali artikel dalam Membuat Aplikasi TodoList dengan Vue JS bagian 6. Jadi pada bagian artikel ini bagaimana jika kita ingin mendapatkan data atau mengeluarkan data yang ada di LocalStoragenya tentu kita akan memanfaatkan yang namanya LifeCycle dari Vue JSnya. Dia sebagai key baru yang namanya ready sebagai function yang kita pisahkan dengan koma setelah key methodsnya sebagai berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-1

Note: Bila Menggunakan Vue JS Versi 2.0 gunakan nama key created.
Yang artinya ketika halamannya sudah ready atau sudah benar benar selesai direload maka kita akan melakukan sesuatu yaitu mengambil data yang ada di LocalStoragenya dengan menggunakan metode getItem yang kita simpan didalam property this.todosnya seperti ini

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-2

Yang default property this.todosnya adalah kosong. Tentu kita akan isi nilainya. Nilainya sendiri dari Object String yang disimpan didalam LocalStorage. Tapi sebelumnya kita harus mengubah terlebih dahulu menjadi Array Object dengan metode JSON.parse lalu mengambil datanya dengan menuliskan Object LocalStorage lalu di ikuti dengan metode getItem dengan menentukan nama key yang sama yaitu lists.

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-3

Tentu kita harus melakukan pengecekan apakah List Todos yang ada didalam LocalStoragenya kosong atau tidak tersedia maka kita akan berikan pilihan sebagai nilai defaultnya yaitu kita akan jadikan sebagai array kosong

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-4

dan bila teman teman lihat dibagian browsernya lalu saya reload halamannya, Jika teman teman perhatikan data-datanya masih ada disana artinya kita sudah berhasil mendapatkan semua hasil datanya dari Object LocalStorage. Hasilnya seperti ini

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-6

Kemudian tugas kita yang terakhir adalah cara menghapus Todosnya. Jadi dibagian metode removeTodonya kita akan melakukan set ulang List Todosnya dengan menuliskan kode yang sama seperti metode AddTodonya sebagai berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part6-27-08-2017-7

Jadi tidak ada bedanya. Nah teman teman sudah bisa melakukan hapus todosnya dengan mengklik tombol removenya maka datanya akan hilang secara otomatis didalam LocalStoragenya. Kesimpulannya menggunakan Object LocalStorage sangatlah simple jadi selama browsernya aktif maka dia akan menyimpan datanya dalam bentuk JSON String tapi pas ketika kita ingin mengambil data kita harus ubah lagi menjadi JSON Parse. Lalu nama metode untuk mengambil data kita gunakan metode getItem untuk menyimpannya kita juga bisa menggunakan metode setItem. Cukup sampai disini pembahasan tentang penggunaan Object LocalStorage pada Vue JS. Semoga jelas dan sampai jumpa.

Download

Artikel, Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More