Html5 web storage adalah web penyimpanan lokal, artinya dengan html5 web storage kita dapat menyimpan data secara lokal dalam browser pengguna. Kamu bisa bayangkan hal ini mirip dengan cookie. Kelebihan dari web stirage adalah lebih aman dan lebih cepat. Data tidak disertakan 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 pasangan kunci / nilai, dan halaman web hanya dapat mengakses data yang tersimpan dengan sendirinya.
Browser yang support web storage adalah Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
localStorage and 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.
<!DOCTYPE html>
<html>
<body>
<div id=”result”></div>
<script>
if(typeof(Storage)!==”undefined”)
{
localStorage.lastname=”Smith”;
document.getElementById(“result”).innerHTML=”Last name: ” + localStorage.lastname;
}
else
{
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support web storage…”;
}
</script>
</body>
</html>
Penjelasan :
Membuat pasangan kunci / nilai localStorage dengan kunci = “nama belakang” nilai dan = “Smith”
Ambil nilai dari kunci “nama belakang” dan masukkan ke elemen dengan id “hasil” =
Tips:
Pasangan Kunci / nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan
0 comments:
Post a Comment