Simpanan Lokal HTML

Simpanan Lokal HTML: Lebih baik daripada cookie.

Apa itu Simpanan Lokal HTML?

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

Sebelum HTML5, data aplikasi hanya dapat disimpan di cookie, termasuk setiap permintaan server. Simpanan 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.

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

Dukungan browser

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

Ketika 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 tetap tersedia 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 sisipkannya ke elemen dengan id="result"

Yang sama seperti di contoh di atas dapat ditulis seperti ini:

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

Syntaks untuk menghapus item localStorage "lastname":

localStorage.removeItem("lastname");

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

Contoh di bawah ini menghitung jumlah kali pengguna menekan tombol. Di kode, string nilai diubah menjadi angka, dan hitungan diincrement 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, perbedaan nya hanya berhubungan dengan penyanggaan data untuk session saja. Jika pengguna menutup tab browser khusus, data akan dihapus.

Contoh berikut untuk menghitung klik tombol pengguna di 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