Manipulasi Data menggunakan localStorage dan sessionStorage - Dayat

Daftar Isi

1. Cara Menggunakan Script
2. Fungsi get
3. Fungsi add
4. Fungsi delete
5. Fungsi find

Berikut adalah script untuk manipulasi data menggunakan localStorage ataupun sessionStorage yang tersedia di setiap browser.

function StorageManipulation(e,t){t=t||"localStorage";var i=window,n=this;if(!(t in i))return!1;this.name=e,this.type=t,this.get=function(){var e=n.type,t=i[e].getItem(n.name);return t?JSON.parse(t):[]},this.find=function(e,t){for(var i=n.get(),r={items:i},a=0;a<i.length;a++)if(i[a][e]==t){r.item=i[a],r.index=a;break}return r},this.delete=function(e,t){var r=n.find(e,t),a=r.items,s=r.index;return s>=0&&(a.splice(s,1),0!=a.length?i[n.type].setItem(n.name,JSON.stringify(a)):i[n.type].removeItem(n.name)),a},this.add=function(e){var t=n.get();if("object"!=typeof e||Array.isArray(e))return"please insert item object";var r="id"in e?"id":Object.keys(e)[0];t=n.delete(r,e[r]),t.push(e);try{i[n.type].setItem(n.name,JSON.stringify(t))}catch(e){return console.log(e),e}}}

Cara Menggunakan Script

Pertama adalah pembuatan variabel dengan keyword tertentu. Contoh:

var storage1 = new StorageManipulation(namaStorage, typeStorage);

pada bagian yang di tandai namaStorage boleh di isi apapun, sedangkan typeStorage hanya boleh di isi localStorage atau sessionStorage atau tidak di isi sama sekali.

Berikut beberapa contoh membuat variable.

//Nama storage penyimpanan-1 dengan type penyimpanan localStorage.
var storage1 = new StorageManipulation("penyimpanan-1", "localStorage");

//sama seperti di atas tetapi tidak memasukkan type penyimpanan.
var storage1 = new StorageManipulation("penyimpanan-1");

//Nama storage penyimpanan-2 dengan type penyimpanan-2 dengan type penyimpanan sessionStorage.
var storage2 = new StorageManipulation("penyimpanan-2", "sessionStorage");

Perbedaan: localStorage, data akan tersimpan sampai browser menghapus cache atau data secara manual. sessionStorage, data akan terhapus ketika tab atau web yang dilihat akan di tutup.

Fungsi get

Fungsi ini digunakan untuk mengambil data yang tersimpan pada Storage. Contoh:

var storage1 = new StorageManipulation("penyimpanan-1");

var items = storage1.get();
console.log(items);
//Hasilnya berupa array yang menampilkan daftar data yang tersimpan.

Fungsi add

Fungsi ini digunakan untuk menambahkan data di Storage, data yang di simpan wajib berupa object. Contoh:

var storage1 = new StorageManipulation("penyimpanan-1");

//Menyimpan data object yang tersimpan di variabel item.
var item = {
  "id": "item-1",
  "content": "content 1"
};
storage1.add(item);

//Atau bisa juga begini.
storage1.add({
  "id": "item-1",
  "content": "content 1"
});

Fungsi delete

Digunakan untuk mengahapus data tertentu sesuai kriteria yang diisi. Contoh:

var storage1 = new StorageManipulation("penyimpanan-1");

//Contoh di dalam penyimpanan terdapat 3 content dengan id berbeda.
var items = storage1.get();

//Kemudian akan di hapus dengan fungsi delete
items = storage1.delete('id', 'item-1');

//bisa juga seperti ini
items = storage1.delete('content', 'content 1');

Fungsi find

Mengambil data tertentu sesuai kriteria yang diisi. Contoh:

var storage1 = new StorageManipulation("penyimpanan-1");

//Fungsi nya hampir sama seperti delete.
var content1 = storage1.find('id', 'item-1');
console.log(content1);
//Maka akan tampil item  tersimpan di Storage.