Sebelum H5, penyimpanan terutama digunakan dengan cookie. Kerugian cookie dengan data pada kepala permintaan, dan ukurannya dalam 4K. Polusi Lord Domain.
Aplikasi Utama: Keranjang Belanja, Login Pelanggan
Untuk browser IE, ada UserData, ukurannya 64k, hanya didukung oleh IE browser.
TargetPenyimpanan dengan cara kunci-kunci, penyimpanan permanen, tidak pernah gagal, kecuali dihapus secara manual.
ukuran:Setiap nama domain 5m
Situasi Dukungan:Catatan: IE9 LocalStorage tidak mendukung file lokal.
Metode deteksi: if (if (window.localstorage) {alert ('browser ini mendukung localstorage');} else {waspada ('browser ini tidak mendukung localstorage');} API Umum:getitem // ambil catatan
setititen // catatan pengaturan
Lepas hapus // hapus catatan
Kunci // ambil nilai yang sesuai dengan kunci
CLEAR // CLEAR RECORDS
Konten penyimpanan:Array, gambar, json, gaya, skrip. Esensi Esensi (Selama dapat diserialisasi menjadi konten string, itu dapat disimpan)
2. Sesi Sesi Lokal STSORAGELocalStorage di HTML5's Storage API adalah sama dengan Sesi Sesi.
3. Cache offline (cache aplikasi)File yang diperlukan untuk aplikasi cache lokal
Bagaimana menggunakan:① Konfigurasikan file manifes
Halaman:
<!File manifes:
File manifes adalah file teks sederhana yang memberi tahu browser bahwa konten cache (dan konten yang tidak cache).
File manifes dapat dibagi menjadi tiga bagian:
① Cache Manifest -File yang tercantum dalam judul ini akan cache setelah unduhan pertama
②network -file yang tercantum di bawah judul ini perlu dihubungkan ke server tanpa di -cache
③ Fallback -File yang tercantum pada judul ini menetapkan bahwa halaman retret saat halaman tidak dapat diakses (seperti halaman 404)
Demo penuh:Cache Manifest# 2016-07-24 v1.0.0/tema.css/main.jsnetwork: login.jsp fallback: /html//offline.htmlPada server: File manifes perlu mengkonfigurasi tipe-mime yang benar, yaitu, teks/cache-manifest.
Seperti Tomcat:
<Mime-Mapping> <Extension> manifes </extension> <mime-Type> Teks/cache-manifest </type-Type> </mime-mapping >>API Umum:
Inti adalah objek ApplicationCache.
0 (Uncached): Tidak ada cache, yaitu tidak ada cache aplikasi yang terkait dengan halaman
1 (Idle): Idle, yaitu, cache aplikasi tidak diperbarui
2 (Checking): Selama cek, sedang mengunduh file deskripsi dan memeriksa pembaruan
3 (Unduh): Dalam unduhan, cache aplikasi sedang mengunduh sumber daya yang ditentukan dalam file deskripsi
4 (Updateready): Diperbarui, semua sumber daya telah diunduh
5 (IDLE): Terbengkalut, yaitu file deskripsi cache aplikasi tidak ada lagi, sehingga halaman tidak dapat mengakses cache aplikasi
Acara Terkait:Menunjukkan perubahan dalam penerapan penerapan status cache:
Memeriksa: dipicu saat browser mencari cache aplikasi
Kesalahan: pemicu saat mengirim kesalahan selama memeriksa atau mengunduh sumber daya
NoupDate: dipicu saat memeriksa file deskripsi dan menemukan bahwa file tidak berubah
Unduh: dipicu saat mengunduh aplikasi sumber daya cache
Kemajuan: terus dipicu dalam proses cache aplikasi unduhan file
Updateready: Unduh cache aplikasi baru di pemicu halaman
di -cache: pemicu saat cache aplikasi selesai
Tiga keunggulan cache aplikasi:① Jelajahi Offline
② Tingkatkan kecepatan pendapatan wajah halaman
③ Kurangi tekanan server
Catatan:
1. Batas kapasitas browser pada data cache mungkin tidak sama (pembatasan yang ditetapkan oleh beberapa browser adalah 5MB per situs)
2. Jika file manifes, atau file yang tercantum di dalam tidak dapat diunduh secara normal, seluruh proses pembaruan akan dianggap gagal, dan browser akan terus menggunakan cache lama
3. Kutipan HTML Manifest harus sama dengan file manifes, di bawah domain yang sama
4. Browser akan secara otomatis menyimpan file HTML dari file manifes, yang menyebabkan versi pembaruan diperbarui jika konten HTML diubah.
5. Cache dalam file manifes tidak ada hubungannya dengan jaringan dan fallback.
6. Sumber daya di Fallback harus sama dengan file manifes
7. Setelah memperbarui versi, harus disegarkan sekali untuk meluncurkan versi baru (situasi halaman akan disikat sekali), dan versi pemantauan acara perlu ditambahkan.
8. Bahkan jika halaman lain di Situs tidak diatur, sumber daya permintaan dapat diakses dari cache di cache
9. Saat file manifes berubah, permintaan sumber daya itu sendiri juga akan memicu pembaruan
Perbedaan antara cache offline dan cache browser tradisional:1. Cache offline adalah untuk seluruh aplikasi, cache browser adalah satu file
2. Anda dapat membuka halaman jika Anda memiliki pemutusan cache offline.
3. cache offline dapat secara aktif memberi tahu browser untuk memperbarui sumber daya
4.Web SQLDatabase Relasional, Akses melalui Pernyataan SQL
Web SQL Database API bukan bagian dari spesifikasi HTML5, tetapi ini merupakan spesifikasi independen, memperkenalkan satu set API yang menggunakan SQL untuk mengoperasikan database klien.
Situasi Dukungan:Database Web SQL dapat berfungsi dalam versi terbaru dari browser Safari, Chrome dan Opera.
Metode inti: ①Pendatabase: Metode ini menggunakan database yang ada atau database baru untuk membuat objek basis data. ② Transaksi: Metode ini memungkinkan kita untuk mengontrol transaksi dan melakukan pengiriman atau rollback berdasarkan situasi ini. ③ ExecutesQL: Metode ini digunakan untuk melakukan kueri SQL yang sebenarnya. Buka database: var db = openDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为 ： 数据库名称、版本号、描述文本、 Ukuran database, panggilan balik pembuatan Jalankan operasi kueri: Var db = openDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); Masukkan data: Var db = OpenDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, Winty) '); Baca data: Db.transaction (function (tx) {tx.executesql ('select * from win', [], function (tx, hasil) {var len = results.rows.length, msg = <p> Nomor catatan kueri: +len +</p>; }}, null);});Dapat dilihat dari operasi ini yang pada dasarnya menggunakan pernyataan SQL untuk melakukan operasi terkait database.
5.indexeddbAPI Database Indeks (IndeksEDB) (sebagai bagian dari HTML5) berguna untuk membuat aplikasi web HTML5 offline dengan data penyimpanan intensif yang kaya. Pada saat yang sama, ini juga membantu data cache lokal, sehingga aplikasi web online tradisional (seperti aplikasi web seluler) dapat berjalan dan merespons lebih cepat.
API Asynchronous:Sebagian besar operasi di IndexedDB bukan metode panggilan kami yang umum digunakan, mengembalikan hasil hasil, tetapi cara respons permintaan, seperti membuka operasi database
Dengan cara ini, ketika kami membuka database, kami benar -benar mengembalikan objek DB, dan objek ini hasilnya. Seperti yang dapat dilihat dari gambar di atas, kecuali untuk hasilnya. Beberapa atribut penting adalah onError, OnSuccess, onUpgradeneeded (ketika kami meminta nomor versi basis data dan nomor versi basis data yang ada tidak konsisten). Ini mirip dengan permintaan AJAX kami. Setelah kami memulai permintaan ini, kami tidak dapat menentukan kapan itu berhasil, jadi kami perlu memproses beberapa logika dalam panggilan balik.
Matikan dan hapus: Function closedb (db) {db.close ();} function deletedb (name) {indexeddb.deletedatabase (name);} Penyimpanan Data:Tidak ada konsep di IndexedDB, tetapi ObjectStore. Dengan kata lain, sebuah toko objek setara dengan tabel, yang dikaitkan dengan setiap bagian data yang disimpan di dalamnya.
Kami dapat menggunakan bidang yang ditentukan di setiap catatan sebagai nilai kunci (keypath), atau menggunakan nomor pembangkit otomatis sebagai nilai kunci (keygenrator), atau tidak ditentukan. Berbagai jenis kunci memilih, struktur data yang dapat disimpan oleh ObjectStore juga dapat disimpan.
Di atas adalah semua isi artikel ini.