HTML5 peyimpanan web : BAB 9

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:

if(typeof(Storage)!=="undefined")

 
{

 
// 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

localStorage.lastname="Smith";

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

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).";

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

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.";

Cobalah sendiri »