Penggunaan web storage HTML lebih baik daripada cookie.
Section Artikel
Apa itu Web Storage pada HTML?
Dengan menggunakan web storage, aplikasi web dapat menyimpan data secara lokal di dalam browser pengguna.
Sebelum adanya HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap server request. Web storage lebih aman, dan sebagian besar data dapat disimpan secara lokal, tanpa memengaruhi kinerja situs web.
Tidak seperti cookie, batas penyimpanannya jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.
Web storage adalah penyimpanan per origin (per domain dan protokol). Semua halaman, dari satu sumber, dapat menyimpan dan mengakses data yang sama.
Browser Support
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Penyimpanan Web.
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objek Web Storage HTML
Penyimpanan web HTML menyediakan dua objek untuk menyimpan data pada klien, yaitu :
- window.localStorage – menyimpan data tanpa tanggal kedaluwarsa
- window.sessionStorage – menyimpan data untuk satu sesi (data hilang saat tab browser ditutup)
Sebelum menggunakan web browser, periksa apakah browser mendukung localStorage dan sessionStorage:
if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. }
Objek localStorage
Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus saat browser ditutup, dan akan tersedia pada hari, minggu, atau tahun berikutnya.
Contoh:
<!DOCTYPE html> <html> <body> <div id="result"></div> <script> // cek browser support if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "Maaf, browser Anda tidak mendukung Penyimpanan Web..."; } </script> </body> </html>
Penjelasan Contoh:
- Membuat pasangan nama / nilai penyimpanan lokal dengan name = “lastname” dan value = “Smith”
- Ambil nilai “lastname” dan masukkan ke dalam elemen dengan id = “result”
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 saat diperlukan!
Contoh berikut menghitung berapa kali pengguna mengklik tombol. Dalam kode ini string nilai diubah menjadi angka untuk dapat meningkatkan penghitungan:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Kamu telah mengklik tombol " + localStorage.clickcount + " Kali.";
} else {
document.getElementById("result").innerHTML = "Maaf, browser Anda tidak mendukung Penyimpanan Web...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Klik disini!</button></p>
<div id="result"></div>
<p>Klik tombol untuk melihat counter (penghitung) bertambah.</p>
<p>Tutup tab browser (atau jendela), dan coba lagi, dan penghitung akan terus menghitung (tidak direset).</p>
</body>
</html>
Objek sessionStorage
Objek sessionStorage sama dengan objek localStorage, kecuali perbedaan bahwa objek ini menyimpan data hanya untuk satu sesi. Data tersebut dihapus ketika pengguna menutup tab browser tertentu.
Contoh berikut menghitung berapa kali pengguna mengklik tombol, dalam sesi saat ini:
<!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 = "Kamu telah mengklik tombol " + sessionStorage.clickcount + " Kali pada sesi ini";
} else {
document.getElementById("result").innerHTML = "Maaf, browser Anda tidak mendukung Penyimpanan Web...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Klik disini!</button></p>
<div id="result"></div>
<p> Klik tombol untuk melihat counter (penghitung) bertambah. <p>
<p> Tutup tab browser (atau jendela), dan coba lagi, dan penghitung akan direset.</p>
</body>
</html>
