HTML5 – CSS – Tutorial – Step 12

Web SQL Database

• Web SQL database API cho phép các developer có thể phát triển ứng dụng web sử dụng database ngay từ trình duyệt web của mình. Không cần phải cài đặt thêm gì cả, vì Web SQL là một phần phát triển của tổ chức W3C
• Web SQL dựa trên nền tảng của SQlite, một dạng SQL rất nhỏ và những tình năng cơ bản nhất.
• Có 3 hàm chính trong Web SQL:
1. openDatabase
2. transaction
3. executeSql
Nếu bạn mở một database không tồn tại thì API sẽ tự động tạo cho bạn database đó. Và bạn cũng không phải lo lắng về việc đóng database.
Đoạn code sau để mở database:

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

openDatabase method cần 4 biến:
1. Tên database
2. Số version
3. Một đoạn text ngắn về database
4. size của database
Chú ý:
Vì đây là Web SQL, nên đừng yêu cầu size của database quá lớn, nếu không thì web browser của bạn sẽ phàn nàn về điều này
Transactions
• Sau khi mở database bạn giờ đã có thể thực hiện các transactions với database. Tại sao phải dùng transactions, đơn giản bởi vì là nó cho bạn khả năng ‘rollback’. Có nghĩa là khi bị một lỗi ở đâu đó thì database của bạn sẽ không update.
ví dụ:

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

INSERT

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

READ

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 = "
Found rows: " + len + "
";
      document.querySelector('#status').innerHTML +=  msg;
	
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
	
   }, null);
});

Toàn bộ ví dụ

   
      		
   
   
      
Status Message
   	

[highlighter]