في المقالة السابقة "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 (وظيفة (تكساس)) {
// تنفيذ البيان للوصول إلى قاعدة البيانات
}) ؛
تستخدم طريقة المعاملة وظيفة رد الاتصال كمعلمة ، حيث يتم تنفيذ العملية المحددة للوصول إلى قاعدة البيانات ؛
3. تنفيذ الاستعلام من خلال طريقة executesqltx.executesql (sqlquery ، [value1 ، value2 ..] ، datahandler ، errorhandler)
تحتوي طريقة executesql على أربعة معلمات ، ووظائفها هي كما يلي:
SQLquery: يمكن إنشاء عبارات SQL التي يجب تنفيذها على وجه التحديد ، وتحديدها وتحديثها وحذفها ؛
[value1 ، value2 ..]: مجموعة من جميع المعلمات المستخدمة في عبارة SQL. في طريقة executesql ، يتم استبدال المعلمات الواجب استخدامها في عبارة SQL؟ أولاً ، ثم تتكون هذه المعلمات من صفيف بدوره ووضعها في المعلمة الثانية ؛
Datahandler: وظيفة رد الاتصال التي تسمى بنجاح ، من خلالها يمكن الحصول على مجموعة نتائج الاستعلام ؛
ErrorHandler: وظيفة رد الاتصال المسمى عند فشل التنفيذ ؛
تستخدم هذه المقالة دعم قاعدة بيانات HTML5 لإعادة تنفيذ إدارة دفتر العناوين في المقالة السابقة. الوظائف المراد تنفيذها هي كما يلي:
يمكن إنشاء جهات الاتصال وحفظها في قاعدة البيانات. تشمل حقول الاتصال: الاسم ، رقم الهاتف المحمول ، الشركة ، وقت الإنشاء ؛
قائمة جميع معلومات الاتصال المحفوظة حاليًا ؛
يمكنك حذف معلومات الاتصال المحددة ؛
وبالمثل ، قم بإعداد صفحة HTML أولاً ، على النحو التالي :<! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title> html5 تخزين محلي قاعدة بيانات محلية </title>
<style>
.adddiv {
الحدود: 2px متقطع #CCC ؛
العرض: 400 بكسل ؛
محاذاة النص: المركز ؛
}
</style>
</head>
<body onload = "loadall ()">
<viv>
<label for = "user_name"> الاسم: </label>
<type type = "text" id = "user_name" name = "user_name"/>
<br/>
<label for = "mobilephone"> الهاتف المحمول: </label>
<type type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<label for = "mobilephone"> الشركة: </label>
<type type = "text" id = "company" name = "Company"/>
<br/>
<type type = "button" onClick = "Save ()" value = "add record"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
يتم عرض الواجهة على النحو التالي:
لتنفيذ وظيفة إنشاء جهة اتصال جديدة وتخزينها في قاعدة البيانات ، مطلوب رمز JS البسيط التالي:
// افتح قاعدة البيانات
var db = opendatabase ('contactdb' ، '' ، 'Demo Demo المحلي' ، 204800) ؛
// حفظ البيانات
وظيفة حفظ () {
var user_name = document.getElementById ("user_name"). value ؛
var mobilephone = document.getElementById ("mobilephone"). القيمة ؛
var company = document.getElementById ("الشركة"). القيمة ؛
// وقت الخلق
var time = new date (). getTime () ؛
db.transaction (function (tx) {
tx.executesql ('insert في قيم الاتصال (؟ ،؟ ،؟ ،؟) ، [user_name ، mobilephone ، الشركة ، الوقت] ، onsuccess ، onerror) ؛
}) ؛
}
// تم تنفيذ وظيفة رد الاتصال بعد تنفيذ بيان SQL بنجاح
وظيفة onsuccess (tx ، rs) {
تنبيه ("عملية ناجحة") ؛
loadall () ؛
}
// تم تنفيذ وظيفة رد الاتصال بعد تنفيذ بيان SQL
دالة onerror (tx ، خطأ) {
التنبيه ("فشل العملية ، رسالة فاشلة:"+ خطأ. message) ؛
}
لعرض جميع قوائم جهات الاتصال المحفوظة حاليًا ، يمكنك استخدام رمز JS التالي:
// استرجع جميع جهات الاتصال المخزنة في قاعدة بيانات SQLLITE
وظيفة loadall () {
var list = document.getElementById ("list") ؛
db.transaction (function (tx) {
// إذا لم يكن جدول البيانات موجودًا ، فقم بإنشاء جدول بيانات
tx.executesql ('إنشاء جدول إذا لم يكن موجودًا (نص اسم ، نص الهاتف ، نص الشركة ، عدد صحيح createTime) ، []) ؛
// تحقق من جميع سجلات الاتصال
tx.executesql ('SELECT * from contact' ، [] ، function (tx ، rs) {
if (rs.Rows.length> 0) {
var result = "<vide>" ؛
النتيجة += "<tr> <th> الرقم التسلسلي </th> <th> الاسم </th> <th> mobile </h> <th> الشركة </th> <th> أضف الوقت </th> <th> العملية </th> </tr>" ؛
لـ (var i = 0 ؛ i <rs.rows.length ؛ i ++) {
var row = rs.Rows.Item (i) ؛
// تحويل الوقت وإخراج التنسيق
var time = new Date () ؛
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 = دالة (تنسيق)
{
var o = {
"M+": this.getmonth ()+1 ، // month
"D+": this.getDate () ، // day
"H+": this.gethours () ، // ساعة
"M+": this.getMinutes () ، // دقيقة
"S+": this.getSeconds () ، // الثانية
"Q+": Math.Floor ((this.getMonth ()+3)/3) ، // Quarter
"S": this.getmilliseconds () // millisecond
}
إذا (/(y+)/. اختبار (تنسيق)) تنسيق = format.replace (regexp. $ 1 ،
(this.getlyear ()+""). substr (4 - regexp. $ 1.Length)) ؛
لـ (var k in o) if (regexp جديد ("(" + k + ")"). اختبار (تنسيق)))
format = format.replace (regexp. $ 1 ،
regexp. $ 1.length == 1؟ نعم] :
("00"+ o [k]). substr ((""+ o [k]). الطول)) ؛
تنسيق العودة
}
أخيرًا ، يكون تأثير تنفيذ الواجهة كما يلي:
لتنفيذ جهة اتصال محددة ، تحتاج إلى تنفيذ رمز JS التالي :// حذف معلومات الاتصال
وظيفة del (الهاتف) {
db.transaction (function (tx) {
// لاحظ أن المعلمة التي تم تمريرها في الهاتف تحتاج إلى تحويل هنا إلى نوع السلسلة
tx.executesql ('حذف من جهة الاتصال where phone =؟' ، [string (phone)] ، onsuccess ، onerror) ؛
}) ؛
}
كما في نمط الجدول في لقطة الشاشة أعلاه ، يمكنك الرجوع إلى رمز CSS التالي :ذ {
الخط: Bold 11px "Trebuchet MS" ، Verdana ، Arial ، Helvetica ، Sans-Serif ؛
اللون: #4F6B72 ؛
اليمين الحدودي: 1 بكسل Solid #C1DAD7 ؛
Border-Bottom: 1PX Solid #C1DAD7 ؛
أعلى الحدود: 1 بكسل الصلبة #C1DAD7 ؛
تباعد الرسائل: 2px ؛
تحويل النص: الكبير.
محاذاة النص: اليسار ؛
Padding: 6px 6px 6px 12px ؛
}
td {
اليمين الحدودي: 1 بكسل Solid #C9DAD7 ؛
Border-Bottom: 1PX Solid #C9DAD7 ؛
الخلفية: #ffff ؛
Padding: 6px 6px 6px 12px ؛
اللون: #4F6B72 ؛
}