Apa itu HTML5 Penyimpanan Web?
Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelumnya, ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman dan lebih cepat.Data tidak disertakan dengan setiap permintaan server, tetapi digunakan HANYA ketika minta. Hal ini juga memungkinkan untuk menyimpan sejumlah besar data, tanpa mempengaruhi kinerja situs web.
Data disimpan dalam kunci / nilai pasangan, dan halaman web hanya dapat mengakses data yang tersimpan dengan sendirinya.
Browser Dukungan
Penyimpanan web didukung di semua browser utama.
localStorage dan sessionStorage
Ada dua objek baru untuk menyimpan data pada klien:
- localStorage - menyimpan data tanpa tanggal kedaluwarsa
- sessionStorage - menyimpan data untuk satu sesi
Sebelum menggunakan penyimpanan web, memeriksa dukungan browser untuk localStorage dan sessionStorage:
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
Obyek localStorage
Obyek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus bila browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
Contoh
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
Cobalah sendiri »
Contoh menjelaskan:
- Buat pasangan kunci / nilai localStorage dengan kunci = "nama belakang" nilai dan = "Smith"
- Mengambil nilai dari kunci "nama belakang" dan masukkan ke elemen dengan id "hasil" =
Tip: Kunci / nilai pasangan selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol. Dalam kode ini string nilai dikonversi menjadi jumlah untuk dapat meningkatkan counter:
Contoh
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
Cobalah sendiri »
Obyek sessionStorage
Obyek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data tersebut dihapus saat pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:
Contoh
{
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.";
Cobalah sendiri »
