Karena keterbatasan ukuran, format, dan format data penyimpanan dari era HTML4, jika aplikasi situs web ingin menyimpan sebagian informasi di browser, itu hanya dapat digunakan untuk menggunakan cookie. Namun, pembatasan cookie ini juga menyebabkan data sederhana seperti cookie hanya dapat menyimpan beberapa pengidentifikasi seperti ID.
Berikut ini adalah pembatasan cookie:
Sebagian besar browser mendukung cookie dengan maksimum 4096 byte.
Browser juga membatasi jumlah cookie yang disimpan di komputer pengguna. Sebagian besar browser hanya mengizinkan setiap situs untuk menyimpan 20 cookie; jika Anda mencoba menyimpan lebih banyak cookie, cookie tertua akan dibuang.
Beberapa browser juga akan membuat batasan absolut pada jumlah total cookie yang akan mereka terima dari semua situs, biasanya 300.
Situasi default Cookie akan dikirim ke server latar belakang dengan permintaan HTTP, tetapi tidak semua permintaan memerlukan cookie, seperti: JS, CSS, gambar dan permintaan lainnya tidak memerlukan cookie.
Untuk memecahkan serangkaian pembatasan cookie, HTML5 dapat secara langsung menyimpan sejumlah besar data ke browser klien melalui API baru JS, dan mendukung basis data lokal yang kompleks untuk membuat JS lebih efisien. HTML5 mendukung dua jenis WebStorage:
Ada dua API yang disimpan di H5, satu adalah penyimpanan web, dan yang lainnya adalah Web SQL. Tidak peduli mana yang didasarkan pada bahasa JavaScript, saya akan mengajari Anda cara menggunakan penyimpanan web
3. Penyimpanan WebHTML5 mendefinisikan penyimpanan Web standar penyimpanan lokal, dan menyediakan dua jenis API penyimpanan: Sesi Sesi dan LocalStorage.
1. LocalStorage telah disimpan secara lokal, dan penyimpanan data adalah permanen. Setelah yang kedua, kedua atau tahun depan, data masih tersedia.Fitur: ① Pelestarian yang aman dan permanen di domain. Artinya, semua halaman dari nama domain yang sama di klien atau browser dapat mengakses data dan data LocalStorage disimpan secara permanen kecuali untuk menghapus, tetapi data antara klien atau browser tidak tergantung satu sama lain.
② Data tidak akan dikirim ke server latar belakang dengan permintaan HTTP;
③ Jangan mempertimbangkan peluang untuk data penyimpanan, karena browser diperlukan untuk mendukung setidaknya 4MB dalam standar HTML5.
Lihatlah sebuah contoh:
Kodenya adalah sebagai berikut:
Fungsi clickCounter () {ifof (typeof (penyimpanan)! == tidak terdefinisi) {if (localstorage.clickcount) {localstorage.clickcount = number (localstorage.cl ickcount) +1;} else {localstorage.clickcount = 1;} dokumen. GetElementById (hasil) .innerHtml = Anda telah mengklik tombol + localstorage.clickcount + kali;} else {document.getElementById (hasil) .innerHtml = maaf, browser Anda tidak mendukung penyimpanan web. ;}} </script> <p> <tombol onClick = clickCounter () type = Tombol> Klik saya! </button> </p> <div id = result> </div> <p> Klik tombol untuk melihat peningkatan penghitung. </p> <p> Matikan tab browser (atau jendela), buka kembali halaman ini, penghitung akan terus menghitung (bukan reset). </p> 2.SessionStorage efektif selama sesi, dan data secara otomatis dihapus setelah browser ditutup;Fitur: Kontrol sesi, pelestarian jangka pendek. Konsep sesi mirip dengan konsep sesi sisi server.
kesesuaian
Catatan: IE9 LocalStorage tidak mendukung file lokal.
Saat ini, semua browser utama mendukung fitur penyimpanan web HTML5 sampai batas tertentu. Seperti yang dapat dilihat dari gambar di atas, pada dasarnya semua browser modern telah mendukung penyimpanan web.
Platform Android dan masing -masing browser dari platform iOS pada dasarnya mendukung karakteristik penyimpanan lokal dari penyimpanan web. Perangkat seluler saat ini di pasaran, selain ponsel android dan iPhone, lebih banyak tablet, dan pada dasarnya bergantung pada dua platform. Menggunakan penyimpanan web di terminal seluler, kita hampir tidak perlu mempertimbangkan apakah browser didukung.
Berikut ini adalah metode deteksi:
if (window.localstorage) {// browser mendukung localstorage} else {// tidak mendukung} if (window.sessionStorage) {// browser mendukung sessionStorage} else {// tidak mendukung} 3. LocalStorageLocalStorage di HTML5's Storage API adalah sama dengan Sesi Sesi. Kami menggunakan LocalStorage sebagai contoh, secara singkat memperkenalkan penyimpanan lokal HTML5, dan membuat beberapa contoh untuk masalah umum seperti traversal. LocalStorage adalah API yang disimpan secara lokal di HTML5. Browser yang berbeda memiliki dukungan API yang berbeda, seperti metode penggunaan, ruang penyimpanan maksimum, dll.
Metode Penyimpanan: String penyimpanan dengan cara nilai kunci. Aplikasi utama: Keranjang belanja, login pelanggan, arsip game. Esensi Esensi Tipe Data yang Dicadangkan: Array, Gambar, JSON, Gaya, Skrip. Esensi Esensi (Selama dapat diserialisasi menjadi konten string, itu dapat disimpan) Alamat Penyimpanan: C:/Pengguna/15014/AppData/Lokal/Google/Chrome/Data Pengguna/Penyimpanan Default/Lokal (Komputer yang berbeda berbeda, Anda perlu membuka tampilan file tersembunyi, tetapi Anda dapat menemukan folder ini untuk mencari LocalStorage di drive C.)LocalStorage menyediakan empat metode untuk membantu kami melakukan operasi terkait pada penyimpanan lokal.
(1) LocalStorage.setItem (nama kunci, nilai kunci) menyimpan data tipe string pada klien lokal. bahwa nilai dari ini adalah bahwa nilai dari ini adalah bahwa nilai dari ini adalah bahwa nilai parameter adalah bahwa nilai dari ini. menyukai:
Localstorage.setitem (nama, Zhang SAN); Nilai kunci dari 28 data.
(2) LocalStorage.GetItem (Nama Kunci) Baca data yang telah disimpan di area lokal, dan baca data nama kunci yang sesuai melalui nama kunci sebagai parameter. menyukai:
var data = localstorage.getItem (name);
(3) localstorage.removeItem (nama kunci) Hapus data yang telah disimpan di area lokal, dan hapus data nama kunci yang sesuai melalui nama kunci sebagai parameter. menyukai:
var data2 = localstorage.removeItem (nama);
(4) localstorage.clear () Hapus semua data yang disimpan secara lokal. menyukai:
Localstorage.clear () Hapus semua data yang disimpan secara lokal. Seperti: localstorage.clear ();
(5) Selain itu, empat fungsi di sessionstorage pada dasarnya sama dengan penggunaan fungsi kelas LocalStorage di atas, yang tidak akan dijelaskan secara rinci.
Berikut ini adalah contoh kecil:
<Tipe Script = JavaScript> LocalStorage.setitem (nama, Zhang SAN); Verifikasi (); // Verifikasi apakah nama dan usia ada // fungsi verifikasi khusus, verifikasi apakah data nama dan usia ada di vektor fungsi () {var type = localstorage.getItem (nam e); .getitem (usia); 3. Strategi Kedaluwarsa LokalKarena HTML5 tidak menetapkan strategi kedaluwarsa untuk penyimpanan lokal, Anda dapat menulis program strategi kedaluwarsa Anda sendiri saat memproses strategi kedaluwarsa data pemrosesan data, sebagai berikut:
<! Title> </head> <body> </body> </html> <script> set (key, value) {varcurtime = new Date (). : nilai, waktu: curTime})); // konversi ke urutan string json/* Catatan: json.parse digunakan untuk menyelesaikan objek JSON dari string, seperti var var str = '{name: huangxiaojian, usia: 23} 'Hasil: json.parse (str) agensi objek: 23 Nama: huangxiaojian __proto__: Catatan objek: Kutipan tunggal ditulis kecuali {}, setiap nama atribut harus berupa kutipan ganda. Json.stringify () digunakan untuk menyelesaikan string dari objek, seperti var a = {a: 1, b: 2} hasil: json.stringify (a) {a: 1, b: 2} */} fungsi get (key, exp) // exp adalah waktu kedaluwarsa dari pengaturan {var value = localstorage.getItem (key); (Tanggal Baru (Tanggal Baru) () .GetTime () -dataobj.time> exp) // Jika waktu saat ini -Minus elemen penyimpanan yang ditetapkan pada saat pembuatan> waktu yang sudah kadaluwarsa {console.log (kedaluwarsa); Prompt Expiration} else {Console.Operasi seperti yang ditunjukkan pada gambar di bawah ini:
Di atas adalah semua isi artikel ini.