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