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 adalah lebih selamat, dan boleh menyimpan data besar secara tempatan tanpa mempengaruhi prestasi laman.

Beberapa perbezaan dengan cookie, batas simpanan adalah sangat besar (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

Array di tabel menunjukkan versi pertama browser yang mendukung penyimpanan lokal sepenuhnya.

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 - untuk menyimpan data tanpa batas tanggal
  • window.sessionStorage - untuk menyimpan data untuk sesi (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 data masih dapat diakses 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 dibutuhkan!

Contoh di bawah ini adalah untuk menghitung jumlah kali pengguna mengklik tombol. Di kode, string nilai diubah ke angka, dan penambahan hitungan dijalankan secara berurutan:

Contoh

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

Coba Sendiri

Objek sessionStorage

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

Berikut adalah contoh penghitungan 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 sudah menekan tombol ini " +
sessionStorage.clickcount + " kali.";

Coba Sendiri