Web SQL Database trong HTML5

Web SQL Database API không phải là một phần thực sự của HTML5 Specification nhưng nó là một chi tiết kỹ thuật riêng mà giới thiệu một tập hợp API để thao tác cơ sở dữ liệu trên Client-Site bởi sử dụng SQL.

Chúng tôi giả sử rằng bạn là một nhà lập trình web giỏi thì bạn sẽ có nhận thức khá sâu về các khái niệm SQL và RDBMS.

Web SQL Database sẽ làm việc trong phiên bản mới nhất của Safari, Chrome và Oprea.

Các phương thức Core

Sau đây là 3 phương thức Core được định nghĩa trong Spec mà chúng tôi sẽ đề cập trong chương hướng dẫn này:

openDatabase: Phương thức này tạo đối tượng database hoặc sử dụng database đang tồn tại hoặc tạo một database mới.
transaction: Phương thức này cho chúng ta khả năng kiểm soát một transaction và thực hiện hoặc commit hoặc rollback dựa trên tình huống đó.
executeSql: Phương thức này được sử dụng để thực thi truy vấn SQL thực sự.

Phương thức openDatabase

Phương thức openDatabase mở một Database nếu nó đã tồn tại, phương thức này sẽ tạo nó nếu nó đã không tồn tại.

Để tạo và mở một Database, sử dụng code sau:

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

Quảng cáo

Phương thức trên nhận 5 tham số sau:

Tên Database
Số phiên bản
Miêu tả văn bản
Cỡ của Database
Tạo Callback

Tham số thứ 5, tạo Callback sẽ được gọi nếu Database đang được tạo. Không có tính năng này, tuy nhiên, Database vẫn đang được tạo đúng phiên bản.

Thực thi truy vấn

Để thực thi một truy vấn, bạn sử dụng hàm database.transaction(). Hàm này cần một tham số đơn, mà là một hàm thực thi truy vấn (query) như sau:

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)');
});

Truy vấn trên sẽ tạo một bảng được gọi là LOGS trong cơ sở dữ liệu 'mydb'.

Hoạt động INSERT

Để tạo đầu vào cho bảng, chúng ta thêm truy vấn SQL đơn giản trong ví dụ trên như sau:

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")');
});

Chúng ta có thể truyền các giá trị động trong khi tạo đầu vào như sau:

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];
});

Ở đây, e_id và e_log là các biến ngoại vi, và executeSql kết nối mỗi mục trong tham số mảng với các dấu "?".

Hoạt động READ

Để đọc các bản ghi đã tồn tại, chúng ta sử dụng một Callback để bắt kết quả như sau:

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);
});

Quảng cáo

Ví dụ tổng kết

Tóm lại, chúng ta giữ ví dụ này trong tài liệu HTML5 như sau và thử chạy nó với trình duyệt 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>

Nó sẽ cho kết quả sau:

Nó sẽ tạo kết quả sau với phiên bản mới nhất của Safari hoặc Opera:

Log message created and row inserted.

Found rows: 2

foobar

logmsg

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML5 phổ biến khác tại vietjack.com: