Membuat CRUD pada LocalStorage Browser
Jika kita pernah berkunjung ke sebuah website ecommerce, pernah nggak sih kalian liat keranjang belanja kita tetep ada meskipun udah di close, disana gua bisa asumsiin bahwa data keranjangnya disimpan di browser kita masing-masing, nah biasanya dia disimpen di dalem cookie, jadi dengan cookie lu bisa nyimpen data dan bakal hilang dalam waktu tertentu, kaya status whatsapp gitu.
Dan ada juga yang terbaru LocalStorage, ini adalah API Browser untuk menyimpan data, ya kaya database, cuma ada disisi user, jadi lu bisa se subjektif mungkin.
Nah apa sih kegunaan LocalStorage, pertama lu bisa menyimpan data berbentuk array atau pun single, ini sangat berguna untuk menyimpan data keranjang, ataupun data” yang di butuhkan untuk personalisasi dan cache supaya akses website nantinya bisa lebih cepat.
Kalo di website sekelas Tokopedia menurut gua dia selain menggunakan LocalStorage, dia juga bakalan nyimpen data keranjangnya di cloud, jadi jika diakses dari perangkat lain datanya tetep sinkron, karena kebanyakan marketplace mewajibkan kita daftar sebelum membeli, itu kenapa datanya akan disimpan di akun kita, jika guest checkout, opsinya adalah disimpan di browser ini
Oke berikut ini Class Javascript yang udah gua buat, biar mempermudah proses CRUD LocalStorage.
class CRUD_LocalStorage{ constructor( nameCRUD ){ this.name = nameCRUD } update( data ){ var stack = window.localStorage.getItem( this.name ) ? JSON.parse( window.localStorage.getItem( this.name ) ): []; // getting from local stack.push(data) window.localStorage.setItem( this.name , JSON.stringify(stack) ); // saving to local } delete( position ){ var stack = JSON.parse( window.localStorage.getItem( this.name ) ); stack.splice( parseInt(position), 1); window.localStorage.setItem( this.name , JSON.stringify(stack) ); } reset(){ window.localStorage.removeItem( this.name ); } get( position ){ var stack = window.localStorage.getItem( this.name ) ? JSON.parse( window.localStorage.getItem( this.name ) ): {}; // getting from local return stack[position]; } }
Nah kode diatas ini sebenernya simple jadi lu bisa kembangin lagi, buat nambah dengan id, jadi lu bisa tambah, hapus dengan produk id, dan masih banyak lagi tergantung segimana logika lu berjalan aje
Nah untuk penggunaan dari Class itu caranya begini
const keranjang = new CRUD_LocalStorage('_keranjang'); keranjang.add( { id: 1, product: 'Produk 1'} ); // Add Keranjang console.log( keranjang.get(0) ); // Mengambil Isi Keranjang Berdasarkan Posisi console.log( keranjang.delete(0) ); // Menghapus Item Berdasarkan Posisi Dimasukan keranjang.reset('_keranjang'); // Reset Keranjang
Ke gitu, supaya dia bisa update data yang udah ada itu bisa lu kembangin dari method add ditambahin id produk aja, jadi kalo ada idnya lu update datanya, kaga usah buat baru
kalo lu terbiasa sama data array, bakalan easy dah, untuk itu coba pelajari, cara buat array, update array, menghapus array berdasarkan id
Oke sekian aja dulu, gua mau lanjut buat FORM API, kalo mau tanya, coret-coret aje, insyallah gua bales 2 hari setelahnya, wkwkw
Tags: Javascript, LocalStorage