HTML5 Local Storage

What is HTML Local Storage?

Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.

Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. Penyimpanan lokal lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa mempengaruhi kinerja website.

Tidak seperti cookies, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.

Penyimpanan lokal adalah per domain. Semua halaman, dari satu domain, dapat menyimpan dan mengakses data yang sama.

Browser Support

The numbers in the table specify the first browser version that fully supports Local Storage.

API
Web Storage	4.0	8.0	3.5	4.0	11.5

HTML Local Storage Objects

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

1. window.localStorage - menyimpan data tanpa tanggal kedaluwarsa

2. window.session Storage - menyimpan data untuk satu sesi (data hilang ketika tab ditutup)

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

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

The localStorage Object

Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Contoh menjelaskan:

Buat nama localStorage / nilai pasangan dengan name = "nama belakang" dan value = "Smith"

Ambil nilai "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"

Contoh di atas juga bisa ditulis seperti ini:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Sintaks untuk menghapus "nama belakang" item localStorage adalah sebagai berikut:

localStorage.removeItem("lastname");

Catatan: Nama / nilai pasangan selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!

Contoh berikut menghitung berapa kali pengguna telah mengklik tombol. Dalam kode ini string nilai dikonversi menjadi angka untuk dapat meningkatkan counter: 

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

The sessionStorage Object

Objek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data akan dihapus saat pengguna menutup jendela browser.

Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";