HTML penyimpanan lokal, lebih baik dari cookies .
Apa itu HTML Storage lokal?
Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookies , 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 jauh lebih besar (at least 5MB) dan informasi yang tidak pernah ditransfer ke server.
Penyimpanan lokal adalah per asal (per domain and protocol) . Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.
Lokal dan sesi penyimpanan
penyimpanan web menawarkan dua daerah-daerah penyimpanan yang berbeda penyimpanan dan sesi penyimpanan yang berbeda dalam lingkup dan seumur hidup.
Data ditempatkan dalam penyimpanan lokal per asal (kombinasi protokol, hostname, dan nomor port seperti yang didefinisikan dalam kebijakan yang sama-asal) (data tersedia untuk semua skrip diambil dari halaman dari asal yang sama yang sebelumnya disimpan data) dan berlanjut setelah browser ditutup.
Penyimpanan sesi adalah per-asal-per-jendela-atau-tab dan terbatas pada masa jendela. Penyimpanan sesi ditujukan agar kasus terpisah dari aplikasi web yang sama untuk menjalankan di windows yang berbeda tanpa mengganggu satu sama lain, kasus penggunaan yang tidak didukung oleh cookies.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Storage lokal.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8,0 | 3,5 | 4.0 | 11,5 |
HTML Penyimpanan Lokal Objects
HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:
- window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
- window.sessionStorage menyimpan data untuk satu sesi (data hilang ketika tab browser 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 Obyek
Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
Contoh
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Cobalah sendiri " Contoh menjelaskan:
- Buat localStorage nama / nilai pasangan dengan name="lastname" dan value="Smith"
- Mengambil nilai dari "lastname" dan masukkan ke dalam elemen dengan id = "hasil"
Contoh di atas juga dapat ditulis seperti ini:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Sintaks untuk menghapus "lastname" barang localStorage adalah sebagai berikut:
localStorage.removeItem("lastname");
Catatan: pasang Nama / nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh berikut menghitung jumlah kali seorang pengguna telah mengklik tombol. Dalam kode ini nilai string dikonversi menjadi angka untuk dapat meningkatkan counter:
Contoh
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)."; Cobalah sendiri " The sessionStorage Obyek
The sessionStorage objek adalah sama dengan localStorage objek, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data tersebut dihapus saat pengguna menutup tab browser tertentu.
Contoh berikut menghitung jumlah kali seorang pengguna telah mengklik tombol, dalam sesi saat ini:
Contoh
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."; Cobalah sendiri "