Belajar HTML bagian HTML Local Stronge di W3SCHOOL
What is HTML Local Stronge?
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 (setidaknya 5MB) dan informasi yang tidak pernah ditransfer ke server.
penyimpanan lokal adalah per asal (per domain dan protokol). Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.
HTML Local Stronge Object
HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:
1. window.localStorage - menyimpan data tanpa tanggal kedaluwarsa 2.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 localStroage Object
Bahwa objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
Ini yang saya buat di text editor:
ini yang saya jalankan lewat web browser:
1. Buat nama localStorage / nilai pasangan dengan nama = "nama belakang" dan value = "Smith"
2. Mengambil nilai dari "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"
2. Mengambil nilai dari "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"
Contoh di atas juga dapat ditulis seperti ini:
Sintaks untuk menghapus "nama belakang" item localStorage adalah sebagai berikut:Catatan: pasang Nama / nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh berikut menghitung jumlah kali pengguna telah mengklik tombol. Dalam kode ini nilai string dikonversi menjadi angka untuk dapat meningkatkan counter:
Ini yang saya buat lewat text editor:
Ini yang saya jalankan lewat web browser:
Dan kalau diklik "Click me", akan seperti dibawah ini:
The SessionStronge Object
The sessionStorage objek sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data tersebut dihapus ketika pengguna menutup tab browser tertentu.
Contoh berikut menghitung jumlah kali pengguna telah mengklik tombol, dalam sesi saat:
Ini yang saya jalankan lewat text editor:
Ini yang saya jalankan lewat web browser:Dan kita klik "Click me", akan keluar seperti dibawah ini: