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.