Cara Membuat Aplikasi TodoList Vue JS Part 5

26/08/2017    Ekky Ridyanto    631     Website

Pada bagian ini kita akan Belajar Tentang LocalStorage dari sintaks Javascript. Jadi LocalStorage ini memperbolehkan kita menyimpan data sementara dibrowser dan data tersebut akan hilang ketika browsernya diclose atau ditutup. Untuk contoh kasusnya sendiri kita akan gunakan Aplikasi Todos yang sebelumnya kita buat dengan Vue JS. Karena pada dasarnya data List Todosnya akan otomatis hilang jika teman teman reload halamannya. Nah jika teman teman menggunakan Object LocalStorage ini maka kita bisa menyimpan data sementara dibrowsernya dan selama browsernya masih terbuka maka data atau list yang sudah kita masukkan akan tetap tampil walaupun teman teman sudah mereload halamannya. Tentu untuk menggunakannya sangatlah simple nama metodenya adalah setItem untuk memasukkan datanya sedangkan untuk metode getItem digunakan untuk mengambil data yang berada di localStoragenya. Langsung saja langkah pertama idenya sendiri ketika kita menjalankan metode addTodo atau memasukkan List Todonya yang akan kita lakukan adalah simpan datanya di dalam LocalStorage. Jadi kita hanya menuliskan Object localStorage lalu di ikuti dengan nama metodenya yaitu setItem yang memiliki pasangan key dan value sebagai berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part5-26-08-2017-1

dimana keynya saya beri nama lists dalam bentuk string sedangkan untuk valuenya didapatkan dari this.todos sebagai Array Objectnya yang telah kita push sebelumnya dan nilainya sendiri dibungkus dalam bentuk JSON stringify. Jadi JSON stringify ini adalah cara untuk mengubah Array Object menjadi bentuk JSON String. Penulisan kodenya seperti berikut

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part5-26-08-2017-2

dan bila tidak ada masalah setiap kita memasukkan List Todosnya lalu teman teman klik kanan inspect elemen dibrowsernya kemudian ke bagian tab application lalu pilih LocalStorage maka kita akan mendapatkan hasil pasangan key dan value seperti ini

Cara-Membuat-Aplikasi-TodoList-Vue-JS-Part5-26-08-2017-3

Kemudian bila kita mencoba tambahkan lagi List Todosnya maka kita akan dapat hasil Array Object yang dipisahkan dengan koma seperti gambar diatas. Jadi sejauh ini kita sudah berhasil melakukan push data ke dalam Object LocalStoragenya. Terima kasih.

Artikel, Web Design, Javascript, Bootstrap, 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