Cara Membuat Aplikasi TodoList Vue JS Part 5

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.

26 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat