Komentar: Artikel ini terutama memperkenalkan contoh penggunaan sederhana dari LocalStorage, database lokal, dan Sesi Sesi di HTML5 Local Storage. Teman yang membutuhkannya bisa merujuknya.
Fitur yang sangat keren dari HTML5 adalah penyimpanan web, mirip dengan cookie sebelumnya, tetapi perbedaannya adalah bahwa penyimpanan web memiliki kapasitas lokal 5 megabyte untuk disimpan, sementara cookie hanya memiliki 4K, yang merupakan keuntungan yang tidak dapat dibandingkan.
WebStrange selanjutnya dibagi menjadi: LocalStorage, Sesiesstorage dan database lokal.
Selanjutnya saya akan memperkenalkannya satu per satu:
1. LocalStorage
Penggunaan LocalStorage relatif sederhana, dan metodenya adalah:
localstorage.setitem (kunci, nilai); // simpan data
localstorage.getItem (key); // baca data
localstorage.removeitem (key); // hapus data individu
localstorage.clear (); // hapus semua data
Kunci: localstorage.key (index); // Dapatkan nilai indeks tertentu
Demo kecil untuk menunjukkan fungsinya:
(function ($) {
$ (function () {
$ .fn.getFormParam = function () {
var serializeObj = {};
var array = this.serializeArray ();
var str = this.serialize ();
$ (array) .each (function () {
if (serializeObj [this.name]) {
if ($. isArray (serializeoBj [this.name])) {
serializeObj [this.name] .push (this.value);
}kalau tidak{
serializeObj [this.name] = [serializeObj [this.name], this.value];
}
}kalau tidak{
serializeObj [this.name] = this.value;
}
});
mengembalikan SerializeObj;
}; </p> <p> var storageFile = json.parse (window.localstorage.getItem ('demo'));
$ .each (StorageFile, function (i, val) {
$ ('#demoform'). Find ('[name = "'+i+'"]'). Val (val);
}); </p> <p> $ ('#demoform'). Temukan ('[type = "kirim"]'). on ('klik', function () {
var data = $ ('#demoform'). getFormParam ();
window.localstorage.setitem ('demo', json.stringify (data));
mengembalikan false;
});
});
}) (jQuery)
Kode HTML:
<! Doctype html>
<html lang = "zh">
<head>
<meta charset = "UTF-8">
<Script src = "jQuery-1.10.2.min.js"> </script>
<skrip src = "demo.js"> </script>
<title> dokumen </iteme>
</head>
<body>
<sorm>
<p> <label> <span> name </span> <Input> </label> </p>
<p> <label> <span> Usia </span> <sput> </label> </p>
<p> <label> <span> Nomor siswa </span> <Input> </label> </p>
<p> <label> <span> Alamat </span> <Input> </label> </p>
<p> <label> <span> hobi </span> <sputput> </label> </p>
<p> <label> <span> Other </span> <textarea cols = "30" baris = "10"> </textarea> </label> </p>
<p> <input type = "kirim" value = "kirim"> </p>
</form>
</body>
</html>
Dengan cara ini, demo sederhana yang menunjukkan LocalStorage diimplementasikan
2. SessionStorage
Penggunaan Sesi Sesi sama dengan LocalStorage, tetapi SesiStorage akan dibersihkan ketika browser menutup situs web, dan LocalStorage akan disimpan ke browser, dan keduanya akan digunakan bersama sebagaimana mestinya.
3. Database lokal
Siswa yang akrab dengan pengembangan iOS/android harus lebih akrab dengan database SQLite
Pengoperasian database dalam HTML5 relatif sederhana, terutama termasuk metode opendatabase dan metode transaksi
Gunakan objek DB untuk menerima objek yang dibuat oleh OpenDatabase untuk mengakses database
var db = openDatabase (DataBasEname, Versi, Deskripsi, Ukuran)
di dalam
DataBasEname: Nama Basis Data
Versi: Versi database dapat diabaikan
Deskripsi: Deskripsi Basis Data
Ukuran: Database dialokasikan ukuran ruang
Metode transaksi menggunakan fungsi panggilan balik sebagai parameter untuk menjalankan metode tertentu untuk mengakses database dalam fungsi.
db.transaction (function (tx)) {
tx.executesql (sqlQuery, [value1, value2 ..], datahandler, errorhandler)
});
Empat parameter dari metode ExecutesQL adalah:
SQLQUERY: pernyataan SQL yang perlu dieksekusi secara khusus, buat || pilih || update || hapus;
[value1, value2 ..]: Array dari semua parameter yang digunakan dalam pernyataan SQL. Dalam metode ExecutEQL, parameter yang akan digunakan dalam pernyataan SQL diganti terlebih dahulu dengan ?, Dan kemudian parameter ini terdiri dari array secara bergantian dan ditempatkan di parameter kedua;
DataHandler: Jalankan fungsi panggilan balik yang berhasil;
ERRORHANDLER: Fungsi panggilan balik gagal dieksekusi;