Simpanan Tempatan HTML

Simpanan Tempatan HTML: Lebih baik daripada cookies.

Apakah Simpanan Tempatan HTML?

Melalui simpanan tempatan (Local Storage), aplikasi web boleh menyimpan data secara tempatan di pelayar pengguna.

Sebelum HTML5, data aplikasi hanya dapat disimpan di cookie, termasuk setiap permintaan pelayan. Simpanan tempatan lebih selamat, dan boleh menyimpan data besar di tempatan tanpa mengganggu keperluan laman web.

Beberapa perbezaan dengan cookie, had simpanan adalah lebih besar banyak (setidaknya 5MB), dan maklumat tidak akan dihantar ke pelayan.

Simpanan tempatan melalui tempat asal (origin) (melalui domain dan protokol). Semua halaman, dari tempat asal, boleh menyimpan dan mengakses data yang sama.

Dukungan browser

Tabel array menunjukkan versi pertama browser yang mendukung penyimpanan lokal penuh.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Objek penyimpanan lokal HTML

HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data di klien:

  • window.localStorage - Menyimpan data tanpa batas tanggal
  • window.sessionStorage - Menyimpan data untuk session (data akan hilang saat tab browser ditutup)

Saat menggunakan penyimpanan lokal, periksa dukungan browser untuk localStorage dan sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Kode untuk localStorage/sessionStorage
} else {
    // Maaf! Web Storage tidak didukung..
}

Objek localStorage

Objek localStorage menyimpan data tanpa batas tanggal. Data tidak akan dihapus saat browser ditutup, dan dapat digunakan kembali di hari berikutnya, minggu, atau tahun.

Contoh

// Simpan
localStorage.setItem("lastname", "Gates");
// Mengambil
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Coba Sendiri

Pengertian contoh:

  • Buat pasangan nama/nilai localStorage, di mana: name="lastname", value="Gates"
  • Ambil nilai "lastname" dan sisipkannya ke elemen dengan id="result"

Contoh di atas juga dapat ditulis seperti ini:

// Simpan
localStorage.lastname = "Gates";
// Mengambil
document.getElementById("result").innerHTML = localStorage.lastname;

Syarat untuk menghapus item localStorage "lastname":

localStorage.removeItem("lastname");

Keterangan: Pasangan nama/nilai selalu disimpan sebagai string. Jangan lupa mengubahnya ke format lain jika perlu!

Contoh di bawah ini menghitung kali pengguna mengklik tombol. Dalam kode, string nilai diubah menjadi angka, dan penghitungan di tambahkan secara berurutan:

Contoh

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Anda telah mengklik tombol ini " +
localStorage.clickcount + " kali.";

Coba Sendiri

Objek sessionStorage

Objek sessionStorage sama dengan objek localStorage, perbezaannya adalah hanya menyimpan data untuk session. Jika pengguna menutup tab browser khusus, data akan dihapus.

Berikut adalah contoh untuk menghitung klik tombol pengguna dalam session ini:

Contoh

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Dalam session ini, anda telah mengklik tombol ini " +
sessionStorage.clickcount + " kali.";

Coba Sendiri