دليل أساسي شبكة الويب الحديثة

واجهات برمجة التطبيقات شبكة الويب الحديثة

وسائط شبكة الويب الحديثة

شبكة الويب الحديثة الرسومية

تخزين التطبيقات في HTML5 تخزين العميل في HTML5

قاعدة البيانات المحلية في HTML5

Web SQL Database في HTML5 (قاعدة بيانات المحلية html5) جذابة بالفعل، عندما تجد أنك تستطيع استخدام جملة استعلام مشابهة لـ mysql لمعالجة قاعدة البيانات المحلية، ستكتشف أن هذا الشيء مثير للاهتمام. اليوم، لنفهم API لـ Web SQL Database في HTML5: openDatabase، transaction، executeSql.

قاعدة بيانات Web SQL HTML5

WebSQL هو مكتبة مستقلة في الأمام، وهو نوع من طرق التخزين على الويب، ونحن نرى ذلك أثناء الت调试، ولكن نستخدمه نادرًا.

إذا كنت مبرمجًا خلفيًا على الويب، يجب أن تكون مفهومة بسهولة عمليات SQL.

قاعدة بيانات Web SQL تعمل في أحدث إصدارات Safari، Chrome و Opera.

الطرق الأساسية

هذه هي الثلاث طرق الأساسية المحددة في المعيار:

openDatabase: هذه الطريقة تستخدم لإنشاء كائن قاعدة بيانات باستخدام قاعدة البيانات الحالية أو الجديدة.
transaction: هذه الطريقة تسمح لنا بتحكم في المعاملة، وتنفيذ الإصدار أو التراجع بناءً على هذا الوضع.
executeSql: هذه الطريقة تستخدم لتنفيذ الاستعلامات SQL الفعلية.

فتح قاعدة البيانات

يمكننا استخدام طريقة openDatabase() لفتح قاعدة البيانات الموجودة مسبقًا، إذا لم تكن قاعدة البيانات موجودة، فإنها ستقوم بإنشاء قاعدة بيانات جديدة باستخدام الكود التالي:

var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);

شرح خمس معلمات لـ openDatabase() 方法:

اسم قاعدة البيانات
رقم الإصدار
نص الوصف
حجم قاعدة البيانات
الدالة التكميلية

الخامس، سيتم استدعاء الدالة التكميلية عند إنشاء قاعدة البيانات.

تنفيذ عملية الاستعلام

استخدام وظيفة database.transaction() للتنفيذ العمليات:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {　　
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
</script>
</body>
</html>

بعد تنفيذ الجملة، سيتم إنشاء جدول LOGS في قاعدة البيانات testdb.

إدخال البيانات

بعد تنفيذ جملة إنشاء الجدول، يمكننا إدخال بعض البيانات:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
});
</script>
</body>
</html>

يمكننا أيضًا استخدام القيم الديناميكية لضمان البيانات:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {　　
　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});
</script>
</body>
</html>

في هذا المثال، e_id و e_log هي متغيرات خارجية، وسيقوم executeSql بتحويل كل عنصر من المدخلات المسار إلى "?".

قراءة البيانات

في هذا المثال، سنوضح كيفية قراءة البيانات الموجودة مسبقًا في قاعدة البيانات:

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
　
db.transaction(function(tx) {
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
});
　
db.transaction(function(tx) {
　　　tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　　　var len = results.rows.length, i;
　　　　　　msg = "<p>عدد السجلات المطلوبة: " + len + "</p>";
　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　
　　　　　　for (i = 0; i < len; i++){
　　　　　　　　　alert(results.rows.item(i).log　);
　　　　　　}
　　　　
　　　}, null);
});
</script>
</body>
</html>

مثال كامل

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
var msg;
　
db.transaction(function(tx) {
　　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
　　　　msg = '<p>تم إنشاء الجدول البياني، وتم إدخال بياناتين.</p>';
　　　　document.querySelector('#status').innerHTML = msg;
});
　
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　var len = results.rows.length, i;
　　　　msg = "<p>عدد السجلات المطلوبة: " + len + "</p>";
　　　　document.querySelector('#status').innerHTML +=    msg;
　
　　　　for (i = 0; i < len; i++){
　　　　　　　　msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
　　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　}
}, null);
});
</script>
<div id="status" name="status">معلومات الحالة</div>
</body>
</html>

اختبار لرؤية ‹/›

نتائج مثال أعلاه تظهر في الشكل التالي:

حذف السجلات

استخدام الشكل التالي لإزالة السجلات:

db.transaction(function(tx) {
　　　　tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

حذف البيانات المحددة باستخدام id يمكن أن يكون ديناميكيًا:

});

db.transaction(function(tx) {
　　　　tx.executeSql('UPDATE LOGS SET log=\
});

　　　　tx.executeSql('UPDATE LOGS SET log=\
});

مثال كامل

مثال

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع دروس أساسية(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
var msg;
　
　db.transaction(function(tx) {
　　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
　　　　msg = '<p>تم إنشاء الجدول البياني، وتم إدخال بياناتين.</p>';
　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　　tx.executeSql('DELETE FROM LOGS WHERE id=1');
　　　　　　msg = '<p>حذف السجل whose id is 1.</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　tx.executeSql('UPDATE LOGS SET log=\
　　　　　　msg = '<p>تحديث السجل whose id is 2.</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　　　　var len = results.rows.length, i;
　　　　　　　msg = "<p>عدد السجلات المطلوبة: " + len + "</p>";
　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　　　　
　　　　　　　for (i = 0; i < len; i++){
　　　　　　　　　　msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
　　　　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　　　　}
　　　　}, null);
　});
</script>
<div id="status" name="status">معلومات الحالة</div>
</body>
</html>

اختبار لرؤية ‹/›

نتائج مثال أعلاه تظهر في الشكل التالي:

تخزين التطبيقات في HTML5 تخزين العميل في HTML5