ในบทความก่อนหน้านี้ "HTML5 Local Storage: Web Storage" มันแนะนำวิธีการใช้ LocalStorage เพื่อใช้ที่เก็บข้อมูลในท้องถิ่นสั้น ๆ ในความเป็นจริงนอกเหนือจาก SessionStorage และ LocalStorage แล้ว HTML5 ยังรองรับการจัดเก็บข้อมูลในท้องถิ่นผ่านฐานข้อมูลท้องถิ่น HTML5 ใช้ฐานข้อมูลประเภทไฟล์เช่น Sqllite ซึ่งส่วนใหญ่จะเข้มข้นบนอุปกรณ์ฝังตัว นักเรียนที่คุ้นเคยกับการพัฒนา iOS/Android ควรคุ้นเคยกับฐานข้อมูล Sqllite
การดำเนินการฐานข้อมูลใน HTML5 นั้นค่อนข้างง่ายโดยมีสองฟังก์ชั่นหลัก:
1. สร้างวัตถุเพื่อเข้าถึงฐานข้อมูลผ่านวิธีการ opendatabasevar db = opendatabase (databasename, เวอร์ชัน, คำอธิบาย, ขนาด)
วิธีนี้มีสี่พารามิเตอร์และฟังก์ชั่นของมันคือ:
Databasename: ชื่อฐานข้อมูล;
เวอร์ชัน: หมายเลขเวอร์ชันฐานข้อมูลไม่มีการเติม;
คำอธิบาย: คำอธิบายฐานข้อมูล;
ขนาด: ขนาดของพื้นที่ที่จัดสรรให้กับฐานข้อมูล
2. ใช้วัตถุการเข้าถึงฐานข้อมูล (เช่น db) ที่สร้างขึ้นในขั้นตอนแรกในการดำเนินการวิธีการทำธุรกรรมเพื่อดำเนินการประมวลผลธุรกรรมdb.transaction (ฟังก์ชั่น (tx)) {
// ดำเนินการคำสั่งเพื่อเข้าถึงฐานข้อมูล
-
วิธีการทำธุรกรรมใช้ฟังก์ชั่นการเรียกกลับเป็นพารามิเตอร์ซึ่งการดำเนินการเฉพาะของการเข้าถึงฐานข้อมูลดำเนินการ
3. ดำเนินการค้นหาผ่านวิธีการดำเนินการ QLtx.executesql (sqlQuery, [value1, value2 .. ], datahandler, errorhandler)
เมธอด ExecutesQl มีสี่พารามิเตอร์และฟังก์ชั่นของมันมีดังนี้:
SQLQuery: คำสั่ง SQL ที่จำเป็นต้องดำเนินการโดยเฉพาะสามารถสร้างเลือกอัปเดตและลบ;
[ค่า 1, ค่า 2 .. ]: อาร์เรย์ของพารามิเตอร์ทั้งหมดที่ใช้ในคำสั่ง SQL ในเมธอด ExecutesQL พารามิเตอร์ที่จะใช้ในคำสั่ง SQL จะถูกแทนที่ด้วย? ครั้งแรกจากนั้นพารามิเตอร์เหล่านี้จะประกอบด้วยอาร์เรย์และวางไว้ในพารามิเตอร์ที่สอง
Datahandler: ฟังก์ชั่นการโทรกลับที่เรียกว่าสำเร็จซึ่งสามารถรับชุดผลลัพธ์แบบสอบถามได้
errorhandler: ฟังก์ชั่นการโทรกลับที่เรียกว่าเมื่อการดำเนินการล้มเหลว;
บทความนี้ใช้การสนับสนุนฐานข้อมูล HTML5 เพื่อนำเสนอการจัดการสมุดที่อยู่ในบทความก่อนหน้า ฟังก์ชั่นที่จะนำไปใช้มีดังนี้:
ผู้ติดต่อสามารถสร้างและบันทึกลงในฐานข้อมูล ฟิลด์ติดต่อรวมถึง: ชื่อ, หมายเลขโทรศัพท์มือถือ, บริษัท , เวลาสร้าง;
แสดงรายการข้อมูลการติดต่อทั้งหมดที่บันทึกไว้ในปัจจุบัน
คุณสามารถลบข้อมูลการติดต่อเฉพาะ
ในทำนองเดียวกันเตรียมหน้า HTML ก่อนดังนี้ :<! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title> ฐานข้อมูลท้องถิ่น HTML5 Local Local Local </title>
<style>
.adddiv {
ชายแดน: 2px ประ #CCC;
ความกว้าง: 400px;
TEXT-ALIGN: CENTER;
-
</style>
</head>
<body onload = "loadall ()">
<div>
<label for = "user_name"> ชื่อ: </lable>
<input type = "text" id = "user_name" name = "user_name"/>>>
<br/>
<label for = "mobilephone"> โทรศัพท์มือถือ: </lable>
<อินพุต type = "text" id = "mobilephone" name = "mobilephone"/>>>
<br/>
<label for = "mobilephone"> บริษัท : </lable>
<input type = "text" id = "company" name = "บริษัท "/>>
<br/>
<อินพุต type = "ปุ่ม" onclick = "save ()" value = "เพิ่มระเบียน"/>>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
อินเทอร์เฟซจะแสดงดังนี้:
ในการใช้ฟังก์ชั่นการสร้างผู้ติดต่อใหม่และจัดเก็บไว้ในฐานข้อมูลจำเป็นต้องใช้รหัส JS อย่างง่ายต่อไปนี้:
// เปิดฐานข้อมูล
var db = opendatabase ('contactdb', '', 'การสาธิตฐานข้อมูลท้องถิ่น', 204800);
// บันทึกข้อมูล
ฟังก์ชั่นบันทึก () {
var user_name = document.getElementById ("user_name"). ค่า;
var mobilephone = document.getElementById ("mobilephone") ค่า;
VAR Company = document.getElementById ("บริษัท ") ค่า;
// เวลาการสร้าง
var time = new Date (). getTime ();
db.transaction (ฟังก์ชั่น (tx) {
tx.executesql ('แทรกลงในค่าการติดต่อ (?,? ,? ,?,?)', [user_name, mobilephone, บริษัท , เวลา], onsuccess, onerror);
-
-
// ฟังก์ชั่นการโทรกลับที่ดำเนินการหลังจากคำสั่ง SQL ดำเนินการสำเร็จ
ฟังก์ชั่น onsuccess (tx, rs) {
การแจ้งเตือน ("การดำเนินการสำเร็จ");
loadall ();
-
// ฟังก์ชั่นการโทรกลับที่ดำเนินการหลังจากคำสั่ง SQL ถูกดำเนินการล้มเหลว
ฟังก์ชั่น onerror (tx, ข้อผิดพลาด) {
การแจ้งเตือน ("การดำเนินการล้มเหลวข้อความล้มเหลว:"+ error.message);
-
ในการแสดงรายชื่อผู้ติดต่อที่บันทึกไว้ทั้งหมดในปัจจุบันคุณสามารถใช้รหัส JS ต่อไปนี้:
// ดึงรายชื่อผู้ติดต่อทั้งหมดที่เก็บไว้ในฐานข้อมูล Sqllite
ฟังก์ชั่น loadall () {
var list = document.getElementById ("รายการ");
db.transaction (ฟังก์ชั่น (tx) {
// หากไม่มีตารางข้อมูลให้สร้างตารางข้อมูล
tx.executesql ('สร้างตารางหากไม่มีการติดต่อ (ข้อความชื่อข้อความโทรศัพท์ข้อความ บริษัท จำนวนเต็ม createTime)', []);
// ตรวจสอบบันทึกการติดต่อทั้งหมด
tx.executesql ('เลือก * จากผู้ติดต่อ', [], ฟังก์ชัน (tx, rs) {
if (rs.rows.length> 0) {
var result = "<table>";
ผลลัพธ์ += "<tr> <th> หมายเลขซีเรียล </th> <th> ชื่อ </th> <th> มือถือ </th> <th> บริษัท </th> <th> เพิ่มเวลา </th> <th> การดำเนินการ </th> </tr>";
สำหรับ (var i = 0; i <rs.rows.length; i ++) {
var row = rs.rows.item (i);
// แปลงเวลาและรูปแบบเอาต์พุต
เวลา var = วันที่ใหม่ ();
Time.Settime (row.createTime);
var timestr = time.format ("yyyy-mm-dd hh: mm: ss");
// ประกอบโหนดแถวของตาราง
ผลลัพธ์+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>" onclick = 'del ("+row.phone+")'/> </td> </tr> ";
-
list.innerhtml = ผลลัพธ์;
}อื่น{
list.innerhtml = "ข้อมูลว่างเปล่าในขณะนี้รีบเร่งและเริ่มเพิ่มผู้ติดต่อ";
-
-
-
-
ในหมู่พวกเขาฟังก์ชั่นรูปแบบที่เกี่ยวข้องกับเวลารูปแบบสามารถเรียกได้ว่าการใช้งาน JS ต่อไปนี้ :date.prototype.format = function (รูปแบบ)
-
var o = {
"M+": this.getMonth ()+1, // เดือน
"d+": this.getdate (), // วัน
"H+": this.getHours (), // ชั่วโมง
"M+": this.getMinutes (), // นาที
"S+": this.getSeconds (), // วินาที
"Q+": Math.floor ((this.getMonth ()+3)/3), // ไตรมาส
"s": this.getmilliseconds () // มิลลิวินาที
-
if (/(y+)/. ทดสอบ (รูปแบบ)) รูปแบบ = format.replace (regexp. $ 1,
(this.getlyear ()+""). substr (4 - regexp. $ 1. ความยาว));
สำหรับ (var k ใน o) ถ้า (ใหม่ regexp ("(" + k + ")"). การทดสอบ (รูปแบบ))
format = format.replace (regexp. $ 1
regexp. $ 1. ความยาว == 1? ตกลง] :
("00"+ o [k]). substr ((""+ o [k]). ความยาว));
รูปแบบการส่งคืน;
-
ในที่สุดเอฟเฟกต์การใช้งานส่วนต่อประสานมีดังนี้:
ในการใช้งานการติดต่อเฉพาะคุณต้องเรียกใช้รหัส JS ต่อไปนี้ :// ลบข้อมูลการติดต่อ
ฟังก์ชั่น del (โทรศัพท์) {
db.transaction (ฟังก์ชั่น (tx) {
// โปรดทราบว่าพารามิเตอร์ที่ส่งผ่านในโทรศัพท์จะต้องแสดงที่นี่จะถูกแปลงเป็นประเภทสตริง
tx.executesql ('ลบจากผู้ติดต่อที่โทรศัพท์ =?', [สตริง (โทรศัพท์)], onsuccess, onerror);
-
-
เช่นเดียวกับในรูปแบบตารางในภาพหน้าจอด้านบนคุณสามารถอ้างถึงรหัส CSS ต่อไปนี้ :ไทย {
ตัวอักษร: ตัวหนา 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
สี: #4F6B72;
ชายแดนขวา: 1px Solid #C1DAD7;
ขอบด้านล่าง: 1px Solid #C1DAD7;
ชายแดนด้านบน: 1px Solid #C1DAD7;
ระยะห่างจดหมาย: 2px;
การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่;
TEXT-ALIGN: ซ้าย;
Padding: 6px 6px 6px 12px;
-
td {
ชายแดนขวา: 1px Solid #C9DAD7;
ขอบด้านล่าง: 1px Solid #C9DAD7;
ความเป็นมา: #FFFF;
Padding: 6px 6px 6px 12px;
สี: #4F6B72;
-