Web Storage
Taukah kamu? HTML5 Web Storage merupakan tekhnologi yang lebih baik di bandingkan dengan cookies. Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelumnya, hal ini dilakukan dengan cookies. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website.
Data disimpan dalam pasangan nama / nilai, dan halaman web hanya dapat mengakses data yang tersimpan dengan sendirinya.
Tidak seperti cookie, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.
Sebelumnya, hal ini dilakukan dengan cookies. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website.
Data disimpan dalam pasangan nama / nilai, dan halaman web hanya dapat mengakses data yang tersimpan dengan sendirinya.
Tidak seperti cookie, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.
HTML5 Web Storage menyediakan dua objek baru untuk menyimpan data pada klien:
- window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
- code.sessionStorage - menyimpan data untuk satu sesi (data hilang ketika tab 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..
}
LocalStorage ObjectObyek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
contoh :
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Selengkapnya :
<!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
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>
Penjelasan Contoh:
- Buat pasangan kunci/nilai localStorage dengan kunci = “lastname” dan nilai = “Smith”
- Mengambil nilai dari kunci “nama belakang” dan masukkan ke elemen dengan id = “hasil”
Obyek sessionStorage
Obyek sessionStorage sama dengan objek localStorage, kecuali bahwa ia menyimpan data hanya untuk satu sesi. Data akan dihapus bila pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:
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.";
Selengkapnya :
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
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.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
