Penyimpanan lokal HTML

Penyimpanan lokal HTML: Lebih baik daripada cookies.

Apa itu penyimpanan lokal HTML?

Melalui penyimpanan lokal (Local Storage), aplikasi web dapat menyimpan data secara lokal di browser pengguna.

Sebelum HTML5, data aplikasi hanya dapat disimpan di cookie, termasuk setiap permintaan server. Penyimpanan lokal lebih aman, dan dapat menyimpan data besar di tempat lokal tanpa mengganggu kinerja situs.

Beberapa perbedaan dengan cookie, batas penyimpanan jauh lebih besar (setidaknya 5MB), dan informasi tidak akan dikirim ke server.

Penyimpanan lokal melalui asal (origin) (melalui domain dan protokol). Semua halaman, dari asal, dapat menyimpan dan mengakses data yang sama.

Dukungan browser

Tabel di bawah 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 session (data akan hilang saat tab browser ditutup)

Pada saat menggunakan penyimpanan lokal, pastikan bahwa browser mendukung 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

// Menyimpan
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 masukkan ke elemen dengan id="result"

Misalkan seperti ini di contoh sebelumnya:

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

Syntaks untuk menghapus proyek localStorage "lastname":

localStorage.removeItem("lastname");

Keterangan: Pasangan nama/nilai selalu disimpan sebagai string. Jangan lupa mengkonversi mereka ke format lain apabila diperlukan!

Contoh di bawah ini untuk menghitung jumlah kali pengguna mengklik tombol. Di kode, string nilai diubah menjadi angka, dan penghitungan di tambahkan secara urut:

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 sama dengan objek localStorage, perbedaan nya hanya dalam menyimpan data untuk session saja. Jika pengguna menutup tab browser khusus, data akan dihapus.

Contoh berikut ini menghitung klik tombol pengguna dalam session saat 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