API Penyimpanan Web HTML
penyimpanan web HTML; lebih baik dari kue.
Apa itu Penyimpanan Web HTML?
Dengan penyimpanan web, aplikasi web dapat menyimpan data secara lokal di dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. Penyimpanan web lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa memengaruhi kinerja situs web.
Tidak seperti cookie, batas penyimpanan jauh lebih besar (minimal 5 MB) dan informasi tidak pernah ditransfer ke server.
Penyimpanan web adalah per asal (per domain dan protokol). Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Penyimpanan Web.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objek Penyimpanan Web HTML
Penyimpanan web HTML menyediakan dua objek untuk menyimpan data pada klien:
window.localStorage- menyimpan data tanpa tanggal kedaluwarsawindow.sessionStorage- menyimpan data untuk satu sesi (data hilang saat tab browser ditutup)
Sebelum menggunakan penyimpanan web, periksa dukungan browser untuk localStorage dan sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
Obyek Penyimpanan lokal
Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus saat browser ditutup, dan akan tersedia pada hari, minggu, atau tahun berikutnya.
Contoh
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Contoh menjelaskan:
- Buat pasangan nama/nilai Penyimpanan lokal dengan name="lastname" dan value="Smith"
- Ambil nilai "nama belakang" dan masukkan ke dalam elemen dengan id="hasil"
Contoh di atas juga bisa ditulis seperti ini:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Sintaks untuk menghapus item localStorage "lastname" adalah sebagai berikut:
localStorage.removeItem("lastname");
Catatan: Pasangan nama/nilai selalu disimpan sebagai string. Ingatlah untuk mengonversinya ke format lain bila diperlukan!
Contoh berikut menghitung berapa kali pengguna mengklik tombol. Dalam kode ini string nilai diubah menjadi angka untuk dapat meningkatkan penghitung:
Contoh
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
Objek sessionStorage
Objek sessionStoragesama dengan objek localStorage, kecuali objek
tersebut menyimpan data hanya untuk satu sesi. Data dihapus ketika pengguna menutup tab browser tertentu.
Contoh berikut menghitung berapa kali pengguna mengklik tombol, di sesi saat ini:
Contoh
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";