Dalam artikel sebelumnya "HTML5 Local Storage: Web Storage", itu secara singkat memperkenalkan cara menggunakan LocalStorage untuk mengimplementasikan penyimpanan lokal; Bahkan, selain sessionStorage dan LocalStorage, HTML5 juga mendukung penyimpanan data lokal melalui database lokal. HTML5 menggunakan database tipe file seperti SQLlite, yang sebagian besar terkonsentrasi pada perangkat tertanam. Siswa yang terbiasa dengan pengembangan iOS/Android harus terbiasa dengan database SQLLITE.
Operasi basis data di HTML5 relatif sederhana, dengan dua fungsi utama:
1. Buat objek untuk mengakses database melalui metode OpenDatabasevar db = openDatabase (DataBasEname, Versi, Deskripsi, Ukuran)
Metode ini memiliki empat parameter, dan fungsinya adalah:
DataBasEname: nama basis data;
Versi: Nomor Versi Basis Data, Tanpa Isi;
Deskripsi: Deskripsi Basis Data;
Ukuran: Ukuran ruang yang dialokasikan ke database;
2. Gunakan objek akses database (seperti db) yang dibuat pada langkah pertama untuk menjalankan metode transaksi untuk melakukan pemrosesan transaksidb.transaction (function (tx)) {
// Jalankan pernyataan untuk mengakses database
});
Metode transaksi menggunakan fungsi panggilan balik sebagai parameter, di mana operasi spesifik mengakses database dilakukan;
3. Execute Query melalui Metode ExecutesQLtx.executesql (sqlQuery, [value1, value2 ..], datahandler, errorhandler)
Metode ExecutesQL memiliki empat parameter, dan fungsinya adalah sebagai berikut:
SQLQUERY: Pernyataan SQL yang perlu dieksekusi secara khusus dapat membuat, memilih, memperbarui, dan menghapus;
[value1, value2 ..]: Array dari semua parameter yang digunakan dalam pernyataan SQL. Dalam metode ExecutEQL, parameter yang akan digunakan dalam pernyataan SQL diganti? Pertama, dan kemudian parameter ini terdiri dari array secara bergantian dan ditempatkan di parameter kedua;
DataHandler: Fungsi panggilan balik yang berhasil disebut, yang melaluinya set hasil kueri dapat diperoleh;
ERRORHANDLER: Fungsi panggilan balik dipanggil saat eksekusi gagal;
Artikel ini menggunakan dukungan basis data HTML5 untuk mengimplementasikan kembali manajemen buku alamat dalam artikel sebelumnya. Fungsi yang akan diimplementasikan adalah sebagai berikut:
Kontak dapat dibuat dan disimpan ke database. Bidang kontak meliputi: nama, nomor ponsel, perusahaan, waktu penciptaan;
Sebutkan semua informasi kontak yang disimpan saat ini;
Anda dapat menghapus informasi kontak tertentu;
Demikian pula, siapkan halaman HTML terlebih dahulu, sebagai berikut :<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8"/>
<title> HTML5 Database Lokal Penyimpanan Lokal </iteme>
<tyle>
.adddiv {
Perbatasan: 2px putus #CCC;
Lebar: 400px;
Teks-Align: tengah;
}
</tyle>
</head>
<body onload = "loadAll ()">
<div>
<label untuk = "user_name"> Nama: </label>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<Label untuk = "MobilePhone"> Ponsel: </label>
<input type = "text" id = "MobilePhone" name = "MobilePhone"/>
<br/>
<Label untuk = "MobilePhone"> Perusahaan: </label>
<input type = "text" id = "company" name = "company"/>
<br/>
<input type = "tombol" ontClick = "save ()" value = "add record"/>
</div>
<br/>
<Div id = "list">
</div>
</body>
</html>
Antarmuka ditampilkan sebagai berikut:
Untuk mengimplementasikan fungsi membuat kontak baru dan menyimpannya ke dalam database, kode JS sederhana berikut diperlukan:
// Buka database
var db = openDatabase ('contactdb', '', 'Demo Database Lokal', 204800);
// Simpan data
fungsi save () {
var user_name = document.geteLementById ("user_name"). value;
var mobilephone = document.getElementById ("MobilePhone"). Nilai;
var company = document.geteLementById ("perusahaan"). nilai;
// Waktu penciptaan
var time = new date (). getTime ();
db.transaction (function (tx) {
tx.executesql ('masukkan ke dalam nilai kontak (?,?,?,?)', [user_name, mobilephone, perusahaan, waktu], onSuccess, onError);
});
}
// Fungsi panggilan balik dieksekusi setelah pernyataan SQL berhasil dieksekusi
fungsi onsuccess (tx, rs) {
alert ("Operasi Sukses");
loadAll ();
}
// Fungsi panggilan balik dieksekusi setelah pernyataan SQL dieksekusi gagal
fungsi onError (tx, error) {
peringatan ("Operasi gagal, Pesan Gagal:"+ error.message);
}
Untuk menampilkan semua daftar kontak yang disimpan saat ini, Anda dapat menggunakan kode JS berikut:
// Ambil semua kontak yang disimpan dalam database SQLLITE
function loadAll () {
var list = document.geteLementById ("list");
db.transaction (function (tx) {
// Jika tabel data tidak ada, buat tabel data
tx.executesql ('buat tabel jika tidak ada kontak (nama teks, teks telepon, teks perusahaan, integer createTime)', []);
// Periksa semua catatan kontak
tx.executesql ('pilih * dari kontak', [], fungsi (tx, rs) {
if (rs.rows.length> 0) {
var result = "<able>";
Hasil += "<tr> <th> nomor seri </th> <th> nama </th> <th> seluler </th> <th> perusahaan </th> <th> tambahkan waktu </t> <t th> operasi </th> </tr>";
untuk (var i = 0; i <rs.rows.length; i ++) {
var row = rs.rows.item (i);
// Konversi output waktu dan format
var time = new date ();
time.settime (row.createTime);
var timestr = time.format ("yyyy-mm-dd hh: mm: ss");
// rakit simpul baris tabel
Hasil+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</ted> <td>"+timestr+"</td> <td> <td> </td '<td>"+timestr+"</td> <td> <input> <td> <td>"+timestr+"</td> <td> <input =' <td> <td>"+timestr+"</td> <td> <input = 'input =' nilai = '<td> <input =' <'input ='+</td> </td '<td> <td>"+</td> </td> </td' OnClick = 'del ("+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = hasil;
}kalau tidak{
list.innerhtml = "Data saat ini kosong, cepat dan mulai menambahkan kontak";
}
});
});
}
Di antara mereka, fungsi format yang melibatkan waktu format dapat disebut sebagai implementasi JS berikut :Date.prototype.format = fungsi (format)
{
var o = {
"M+": this.getmonth ()+1, // bulan
"d+": this.getDate (), // day
"h+": this.getHours (), // jam
"M+": this.getMinutes (), // menit
"S+": this.getSeconds (), // kedua
"q+": math.floor ((this.getmonth ()+3)/3), // kuartal
"S": this.getMilliseconds () // milidetik
}
if (/(y+)/. test (format)) format = format.replace (regexp. $ 1,
(this.getlyear ()+""). substr (4 - regexp. $ 1.length));
untuk (var k dalam o) if (regexp baru ("(" + k + ")). Tes (format)))
format = format.replace (regexp. $ 1,
Regexp. $ 1.length == 1? Oke] :
("00"+ o [k]). Substr ((""+ o [k]). Panjang));
format pengembalian;
}
Akhirnya, efek implementasi antarmuka adalah sebagai berikut:
Untuk mengimplementasikan kontak tertentu, Anda perlu menjalankan kode JS berikut :// hapus informasi kontak
fungsi del (telepon) {
db.transaction (function (tx) {
// Perhatikan bahwa parameter yang diteruskan di telepon perlu ditampilkan di sini dikonversi ke jenis string
tx.executesql ('hapus dari kontak di mana telepon =?', [string (telepon)], onSuccess, onError);
});
}
Seperti pada gaya tabel di tangkapan layar di atas, Anda dapat merujuk pada kode CSS berikut :th {
Font: tebal 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Warna: #4F6B72;
Border-Right: 1px solid #c1dad7;
Border-Bottom: 1px solid #c1dad7;
Border-top: 1px solid #c1dad7;
spasi surat: 2px;
Teks-transform: huruf besar;
Teks-Align: Kiri;
padding: 6px 6px 6px 12px;
}
td {
Border-Right: 1px solid #c9dad7;
Border-Bottom: 1px solid #c9dad7;
Latar Belakang: #FFFF;
padding: 6px 6px 6px 12px;
Warna: #4F6B72;
}