HTML5 - ฐานข้อมูล Web SQL

Web SQL Database API ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML5 แต่เป็นข้อกำหนดแยกต่างหากซึ่งแนะนำชุดของ API เพื่อจัดการฐานข้อมูลฝั่งไคลเอ็นต์โดยใช้ SQL

ฉันสมมติว่าคุณเป็นนักพัฒนาเว็บที่ยอดเยี่ยมและหากเป็นเช่นนั้นก็ไม่ต้องสงสัยเลยว่าคุณคงตระหนักดีถึงแนวคิดของ SQL และ RDBMS หากคุณยังคงต้องการที่จะมีเซสชั่นกับ SQL แล้วคุณสามารถผ่านไปเราสอน SQL

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

วิธีการหลัก

มีสามวิธีหลักต่อไปนี้ที่กำหนดไว้ในข้อมูลจำเพาะที่ฉันจะกล่าวถึงในบทช่วยสอนนี้ -

openDatabase - วิธีนี้จะสร้างวัตถุฐานข้อมูลโดยใช้ฐานข้อมูลที่มีอยู่หรือสร้างใหม่
transaction - วิธีนี้ช่วยให้เราสามารถควบคุมธุรกรรมและดำเนินการคอมมิตหรือย้อนกลับตามสถานการณ์
executeSql - วิธีนี้ใช้เพื่อดำเนินการสืบค้น SQL จริง

กำลังเปิดฐานข้อมูล

opendatabaseวิธีการดูแลของการเปิดฐานข้อมูลถ้ามีอยู่แล้ววิธีนี้จะสร้างมันถ้ามันแล้วไม่ได้อยู่

ในการสร้างและเปิดฐานข้อมูลให้ใช้รหัสต่อไปนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

วิธีการข้างต้นใช้พารามิเตอร์ห้าตัวต่อไปนี้ -

ชื่อฐานข้อมูล
หมายเลขเวอร์ชัน
คำอธิบายข้อความ
ขนาดของฐานข้อมูล
การสร้างการโทรกลับ

อาร์กิวเมนต์สุดท้ายและที่ 5 การเรียกกลับการสร้างจะถูกเรียกหากกำลังสร้างฐานข้อมูล อย่างไรก็ตามหากไม่มีคุณสมบัตินี้ฐานข้อมูลยังคงถูกสร้างขึ้นทันทีและมีเวอร์ชันที่ถูกต้อง

การดำเนินการสืบค้น

ในการดำเนินการสืบค้นคุณใช้ฟังก์ชัน database.transaction () ฟังก์ชันนี้ต้องการอาร์กิวเมนต์เดียวซึ่งเป็นฟังก์ชันที่ดูแลการดำเนินการสืบค้นดังต่อไปนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

แบบสอบถามด้านบนจะสร้างตารางที่เรียกว่า LOGS ในฐานข้อมูล 'mydb'

การทำงานของ INSERT

ในการสร้างเอนเทอร์รี่ลงในตารางเราจะเพิ่มคิวรี SQL อย่างง่ายในตัวอย่างด้านบนดังนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

เราสามารถส่งผ่านค่าไดนามิกในขณะที่สร้างการป้อนได้ดังนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 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]; 
});

ที่นี่ e_id และ e_log เป็นตัวแปรภายนอกและ executeSql จะแมปแต่ละรายการในอาร์กิวเมนต์อาร์เรย์กับ "?" s

อ่านการทำงาน

ในการอ่านบันทึกที่มีอยู่แล้วเราใช้การโทรกลับเพื่อบันทึกผลลัพธ์ดังนี้ -

var db = openDatabase('mydb', '1.0', 'Test DB', 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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

ตัวอย่างสุดท้าย

สุดท้ายให้เราเก็บตัวอย่างนี้ไว้ในเอกสาร HTML5 ที่สมบูรณ์ดังต่อไปนี้และลองเรียกใช้ด้วยเบราว์เซอร์ Safari

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 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, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</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>Found rows: " + 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> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -