Pengenalan kepada aplikasi Penyimpanan Pangkalan Data bagi kemahiran tutorial HTML5 storage

Pengenalan kepada aplikasi Penyimpanan Pangkalan Data bagi kemahiran tutorial HTML5 storage_html5 tempatan

WBOY

Lepaskan： 2016-05-16 15:50:34

asal

1811 orang telah melayarinya

Dalam artikel sebelumnya "Storan Web bagi Storan Setempat HTML5", kami secara ringkas memperkenalkan cara menggunakan localStorage untuk mencapai storan setempat, sebenarnya, selain sessionStorage dan localStorage, HTML5 juga menyokong storan data tempatan melalui pangkalan data tempatan , HTML5 menggunakan pangkalan data jenis fail seperti "SQLLite", yang kebanyakannya tertumpu pada peranti terbenam Pelajar yang biasa dengan pembangunan IOS/Android harus biasa dengan pangkalan data SQLLite.
Operasi pangkalan data dalam HTML5 agak mudah, terutamanya termasuk dua fungsi berikut:
1 Cipta objek untuk mengakses pangkalan data melalui kaedah openDatabase

<.>

Salin kodKod adalah seperti berikut:

var db = openDatabase(nama pangkalan data, versi, penerangan, saiz)

Kaedah ini mempunyai empat parameter, fungsinya ialah:

nama pangkalan data: nama pangkalan data
versi: nombor versi pangkalan data, pilihan
keterangan: keterangan pangkalan data; diperuntukkan untuk saiz pangkalan data;

2 Gunakan objek akses pangkalan data (seperti db) yang dibuat dalam langkah pertama untuk melaksanakan kaedah transaksi untuk melakukan pemprosesan transaksi

Salin kod

Kod adalah seperti berikut:

db.transaction(function(tx)){

// Laksanakan pernyataan untuk mengakses pangkalan data

} ; >

Salin kod

Kodnya adalah seperti berikut:

tx.executeSql(sqlQuery,[value1,value2. .], dataHandler, errorHandler)

Kaedah executeSql mempunyai empat parameter dan fungsinya adalah seperti berikut: sqlQuery: Pernyataan sql yang perlu dilaksanakan secara khusus, yang boleh mencipta, memilih, mengemas kini, memadam; parameter yang akan digunakan dalam pernyataan sql dengan "?", dan kemudian masukkan parameter ini ke dalam tatasusunan dalam urutan Dalam parameter kedua dataHandler: fungsi panggil balik yang dipanggil apabila pelaksanaan berjaya, yang menghasilkan pertanyaan. set boleh diperolehi; seperti berikut: Kenalan boleh dibuat dan disimpan dalam pangkalan data termasuk: nama, nombor telefon mudah alih, masa penciptaan

Eksport semua maklumat kenalan yang disimpan sekarang; ;

Begitu juga, sediakan halaman HTML terlebih dahulu, seperti berikut
:

Salin kod

Kodnya adalah seperti berikut:

;
Artikel pangkalan data tempatan storan HTML5
>text-align:center;

}

"addDiv"> Name:

Telefon mudah alih:

Syarikat:< "company" name="company"/>

Fungsi memerlukan kod JS mudah berikut:

Salin kod

Kod adalah seperti berikut:

//Buka pangkalan data
var db = openDatabase('contactdb','','local database demo',204800
//Save data
function save(){);
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value ;
//Masa penciptaan
var masa = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact values(?, ? ,?,?)',[nama_pengguna,telefon mudah alih,syarikat,masa],onSuccess,onError); 🎜>fungsi onSuccess(tx,rs){
alert("Operation successful");
loadAll();
}
//Fungsi panggil balik yang dilaksanakan selepas penyataan SQL gagal dilaksanakan >function onError(tx ,error){
alert("Operation failed, failure message: " error.message);
}

Untuk memaparkan semua senarai kenalan yang sedang disimpan, anda boleh gunakan pelaksanaan Kod JS berikut:

Salin kod

Kodnya adalah seperti berikut: //Simpan semua dalam Dapatkan semua kenalan dalam pangkalan data sqlLite function loadAll(){

var list = document.getElementById("list"); 🎜>//jika Jika jadual data tidak wujud, cipta jadual data

tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);

//Soal semua kenalan Rekod orang
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "result = "Nombor siriNamaTelefon mudah alih Syarikat< /th>Tambah masaOperasi";
untuk(var i=0;ivar row = rs.rows.item(i);
//Tukar masa dan format output
var time = new Date(
time.setTime(); row.createtime );
var timeStr = time.format("yyyy-MM-dd hh:mm:ss"); ;" row.name "" row.phone "" baris .company "< ;/td>" timeStr "< /td>";
}
list.innerHTML = result;
}else{
list.innerHTML = "Data kosong pada masa ini, mula menambah kenalan cepat";
}
});
});
}

Antaranya, fungsi format yang melibatkan masa pemformatan boleh dilaksanakan dengan merujuk kepada JS berikut
:

Salin kod
Kodnya adalah seperti berikut:

Date.prototype.format = fungsi (format)

{ var o = { "M " : this.getMonth() 1, //month "d " : this.getDate( ), //hari "h " : this.getHours(), //hour

"m " : this.getMinutes(), //minit

"s " : this.getSeconds(), //saat

"q " : Math.floor((this.getMonth() 3)/3), //suku
"S" : this.getMillisaat() //milisaat
}
if(/(y )/ .test(format)) format=format.replace(RegExp.$1,
(this.getFullYear() "").substr(4 - RegExp.$1.length)
for(var k in o )if(new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length= =1 ? o[k] :
("00" o[k]).substr(("" o[k]).panjang));
format balik; 🎜>
Akhir sekali, antara muka Kesan pelaksanaan adalah seperti berikut:

Untuk melaksanakan kenalan tertentu, anda perlu melaksanakan kod JS berikut
:

Salin kod

Kod adalah seperti berikut:
//Padam maklumat hubungan
fungsi del (telefon){
db.transaction(function(tx) {

//Perhatikan bahawa perkara yang perlu ditunjukkan di sini ialah menukar telefon parameter masuk kepada jenis rentetan

tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError) ; }

Untuk gaya jadual dalam tangkapan skrin di atas, sila rujuk kod CSS berikut

Salin kod

代码如下:

th {
font: tebal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
warna: #4f6b72;
sempadan-kanan: 1px pepejal #C1DAD7;
bahagian bawah sempadan: 1px pepejal #C1DAD7;
atas sempadan: 1px pepejal #C1DAD7;
jarak huruf: 2px;
teks-transformasi: huruf besar;
text-align: kiri;
lapik: 6px 6px 6px 12px;
}
td {
sempadan-kanan: 1px pepejal #C9DAD7;
bahagian bawah sempadan: 1px pepejal #C9DAD7;
latar belakang: #fff;
lapik: 6px 6px 6px 12px;
warna: #4f6b72;
}