หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

HTML 5 Web SQL Database Core Trident

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-29 22:32:02

Web SQL Database API ไม่ได้รวมอยู่ในข้อกำหนด HTML 5 มันเป็นข้อกำหนดอิสระที่แนะนำชุดของ API ที่ใช้ SQL เพื่อใช้งานฐานข้อมูลไคลเอนต์ สมมติว่าคุณเป็นนักพัฒนาเว็บที่ยอดเยี่ยมไม่ต้องสงสัยเลยว่าคุณคุ้นเคยกับแนวคิดที่เกี่ยวข้องกับ SQL และฐานข้อมูล หากคุณไม่คุ้นเคยกับ SQL ให้อ่านต่อ ก่อนหน้าบทความนี้ควรเรียนรู้บทช่วยสอนที่เกี่ยวข้องกับ SQL ก่อน

เวอร์ชันล่าสุดของ Chrome, Safari และ Opera ทั้งหมดรองรับฐานข้อมูล Web SQL ทั้งหมด

วิธีหลัก

บทความนี้จะแนะนำสามวิธีหลักที่กำหนดไว้ในข้อกำหนด:

1. Opendatabase: วิธีนี้ใช้ฐานข้อมูลที่มีอยู่หรือสร้างฐานข้อมูลใหม่เพื่อสร้างวัตถุฐานข้อมูล

2. ธุรกรรม: วิธีนี้ช่วยให้เราสามารถควบคุมการทำธุรกรรมหรือย้อนกลับตามสถานการณ์

3. ExecutesQL: วิธีนี้ใช้เพื่อดำเนินการสืบค้น SQL จริง

เปิดฐานข้อมูล

วิธี Opendatabase เปิดฐานข้อมูลที่มีอยู่ หากฐานข้อมูลไม่มีอยู่ก็สามารถสร้างฐานข้อมูลได้ ไวยากรณ์สำหรับการสร้างและเปิดฐานข้อมูลมีดังนี้:

  1.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);

วิธีการ opendatabase ด้านบนใช้พารามิเตอร์ห้าตัวต่อไปนี้:

1. ชื่อฐานข้อมูล (MYDB)

2. หมายเลขเวอร์ชัน (1.0)

3. คำอธิบาย (ทดสอบ DB)

4. ขนาดฐานข้อมูล (2*1024*1024)

5. สร้างการโทรกลับ

อันสุดท้ายนั่นคือพารามิเตอร์ที่ห้าสร้างการโทรกลับซึ่งจะถูกเรียกเมื่อสร้างฐานข้อมูล แต่แม้จะไม่มีพารามิเตอร์นี้ฐานข้อมูลสามารถสร้างได้ที่รันไทม์

ดำเนินการค้นหา

ดำเนินการค้นหาโดยใช้ฟังก์ชัน Database.TransAction () ซึ่งต้องการพารามิเตอร์เดียวเท่านั้นและต่อไปนี้เป็นคำสั่งค้นหาจริง:

  1.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);
  2.  db.transaction (ฟังก์ชั่น (tx) {
  3.  tx.executesql ('createTeableifnotexistslogs (idunique, log)');
  4.  -

แบบสอบถามข้างต้นจะสร้างตารางบันทึกในฐานข้อมูล MYDB

แทรกการทำงาน

เพื่อที่จะแทรกระเบียนใหม่ลงในตารางเราได้เพิ่มแบบสอบถาม SQL อย่างง่ายลงในคำสั่ง Query ข้างต้นและคำสั่งที่แก้ไขมีดังนี้:

  1.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);
  2.  db.transaction (ฟังก์ชั่น (tx) {
  3.  tx.executesql ('createTeableifnotexistslogs (idunique, log)');
  4.  tx.executesql ('insertintologs (id, log) ค่า (1, foobar)');
  5.  tx.executesql ('insertintologs (id, log) ค่า (2, logmsg)');
  6.  -

เมื่อแทรกระเบียนใหม่เรายังสามารถผ่านค่าไดนามิกเช่น:

  1.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);
  2.  db.transaction (ฟังก์ชั่น (tx) {
  3.  tx.executesql ('createTeableifnotexistslogs (idunique, log)');
  4.  tx.executesql ('insertintologs
  5.  (id, log) ค่า (?,? '), [e_id, e_log];
  6.  -

ที่นี่ e_id และ e_log เป็นตัวแปรภายนอก, ExecutesQL แผนที่แต่ละรายการไป? ในพารามิเตอร์อาร์เรย์

อ่านการดำเนินการ

หากคุณต้องการอ่านบันทึกที่มีอยู่แล้วเราใช้การโทรกลับเพื่อจับภาพผลลัพธ์รหัสมีดังนี้:

  1.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);
  2.  db.transaction (ฟังก์ชั่น (tx) {
  3.  tx.executesql ('createTeableifnotexistslogs (idunique, log)');
  4.  tx.executesql ('insertintologs (id, log) ค่า (1, foobar)');
  5.  tx.executesql ('insertintologs (id, log) ค่า (2, logmsg)');
  6.  -
  7.  db.transaction (ฟังก์ชั่น (tx) {
  8.  tx.executesql ('เลือก*fromlogs', [], ฟังก์ชัน (tx, ผลลัพธ์) {
  9.  varlen = results.rows.length, i;
  10.  msg = <p> FoundRows:+Len+</p>;
  11.  Document.QuerySelector ('#status'). innerhtml+= msg;
  12.  สำหรับ (i = 0; i <len; i ++) {
  13.  การแจ้งเตือน (results.rows.item (i) .log);
  14.  -
  15.  },โมฆะ);
  16.  -
ตัวอย่างที่สมบูรณ์

ในที่สุดเรานำเสนอสิ่งที่อธิบายไว้ก่อนหน้านี้ในเอกสาร HTML 5 ที่สมบูรณ์ในขณะที่ใช้เบราว์เซอร์เพื่อแยกวิเคราะห์เอกสาร HTML 5

  1.  <! doctypehtml>
  2.  <html>
  3.  <head>
  4.  <scriptType = text/javascript>
  5.  VARDB = OpEndatabase ('MYDB', '1.0', 'TestDB', 2*1024*1024);
  6.  Varmsg;
  7.  db.transaction (ฟังก์ชั่น (tx) {
  8.  tx.executesql ('createTeableifnotexistslogs (idunique, log)');
  9.  tx.executesql ('insertintologs (id, log) ค่า (1, foobar)');
  10.  tx.executesql ('insertintologs (id, log) ค่า (2, logmsg)');
  11.  msg = '<p> logmessagecreatedandrowinserted. </p>';
  12.  Document.QuerySelector ('#status'). innerHtml = msg;
  13.  -
  15.  db.transaction (ฟังก์ชั่น (tx) {
  16.  tx.executesql ('เลือก*fromlogs', [], ฟังก์ชัน (tx, ผลลัพธ์) {
  17.  varlen = results.rows.length, i;
  18.  msg = <p> FoundRows:+Len+</p>;
  19.  Document.QuerySelector ('#status'). innerhtml+= msg;
  20.  สำหรับ (i = 0; i <len; i ++) {
  21.  msg = <p> <b>+results.rows.item (i) .log+</b> </p>;
  22.  Document.QuerySelector ('#status'). innerhtml+= msg;
  23.  -
  24.  },โมฆะ);
  25.  -
  26.  </script>
  27.  </head>
  28.  <body>
  29.  <divid = stationsName = Status> StatusMessage </div>
  30.  </body>
  31.  </html>

ด้านล่างเป็นผลลัพธ์ผลลัพธ์ที่ผลิตในเบราว์เซอร์ Safari หรือ Opera เวอร์ชันล่าสุด

  1.  LogMessagecreatedandrowinsert
  3.  Foundrows: 2
  5.  คนโง่
  7.  LogMSG
บทความที่เกี่ยวข้อง