HTML5 – Web SQL Database

Chrome Developer Tools - Web SQL DatabaseWeb SQL Database là một công nghệ kết hợp giữa trình duyệt và SQLite  để hỗ trợ việc tạo và quản lý database ở phía client. Các thao tác với database sẽ được thực hiện bởi javascript và sử dụng các câu lệnh SQL để truy vấn dữ liệu.

Giới thiệu

Lợi ích của SQLite là có để được tích hợp vào các ứng dụng với một thư viện duy nhất để truy xuất được database. Chính vì vậy, bạn có thể sử dụng nó làm cơ sở dữ liệu cho những ứng dụng nhỏ và không cần thiết cài đặt bất kì phần mềm hoặc driver nào. Hiện tại Web SQL Database được hỗ trợ trong các trình duyệt Google Chrome, Opera và Safari.

Trong javascript, bạn sử dụng các phương thức chính sau để làm việc với Web SQL Database.

openDatabase: mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại.

transaction / readTransaction: hỗ trợ thực hiện các thao tác với database và rollback nếu xảy ra sai sót.

executeSql: thực thi một câu lệnh SQL.

Open Database

Phương thức này có nhiệm vụ mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại. Phương thức này được khai báo như sau:

Database openDatabase(
    in DOMString name,
    in DOMString version,
    in DOMString displayName,
    in unsigned long estimatedSize,
    in optional DatabaseCallback creationCallback
);

Tham số:

–          name: tên của database.

–          version: phiên bản. Hai database trùng tên nhưng khác phiên bản thì khác nhau.

–          displayname: mô tả.

–          estimatedSize: dung lượng được tính theo đơn vị byte.

–          creationCallback: phương thức callback được thực thi sau khi database mở/tạo.

Ví dụ tạo một database với tên “mydb” và dung lượng là 5 MB:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

Transaction

Bạn cần thực thi các câu SQL trong ngữ cảnh của một transaction. Một transaction cung cấp khả năng rollback khi một trong những câu lệnh bên trong nó thực thi thất bại. Nghĩa là nếu bất kì một lệnh SQL nào thất bại, mọi thao tác thực hiện trước đó trong transaction sẽ bị hủy bỏ và database không bị ảnh hưởng gì cả.

Interface Database hỗ trợ hai phương thức giúp thực hiện điều này là transaction() và readTransaction(). Điểm khác biệt giữa chúng là transaction() hỗ trợ read/write, còn readTransaction() là read-only. Như vậy sử dụng readTransaction() sẽ cho hiệu suất cao hơn nếu như bạn chỉ cần đọc dữ liệu.

void transaction(
    in SQLTransactionCallback callback,
    in optional SQLTransactionErrorCallback errorCallback,
    in optional SQLVoidCallback successCallback
);

Ví dụ:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);
db.transaction(function (tx) {
  // Using tx object to execute SQL Statements
});

Execute SQL

executeSql() là phương thức duy nhất để thực thi một câu lệnh SQL trong Web SQL. Nó được sử dụng cho cả mục đích đọc và ghi dữ liệu

void executeSql(
    in DOMString sqlStatement,
    in optional ObjectArray arguments,
    in optional SQLStatementCallback callback,
    in optional SQLStatementErrorCallback errorCallback
);

Ví dụ 1: tạo bảng Customers và thêm hai dòng dữ liệu vào bảng này.

db.transaction(function (tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS CUSTOMERS(id unique, name)");
  tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (1, 'peter')");
  tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (2, 'paul')");
});

Tuy nhiên cách thực thi SQL trên không được rõ ràng và có thể bị các vấn đề về bảo mật như SQL injection. Vì vậy tốt hơn bạn nên để các tham số cần truyền cho câu SQL trong một mảng và đặt vào làm tham số thứ 2 của phương thức executeSql(). Các vị trí trong câu SQL chứa tham số sẽ được thay thế bởi dấu ‘?’:

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [1,"peter"]);
tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [2,"paul"]);

Ví dụ 2:Hiển thị dữ liệu của bảng Customer lên trang web dưới dạng table:

db.readTransaction(function(tx){
	showCustomers(tx);
});

function showCustomers(tx)
{
	var table="",row="";
	var i;
	tx.executeSql("SELECT * FROM CUSTOMERS", [], function (tx1, results) {

	for (i=0;i < results.rows.length; i++){
		var customer=results.rows.item(i);
		row="<td>"+customer.id+"</td>";
		row+="<td>"+customer.name+"</td>";

		table+="<tr>"+row+"</tr>";
	}
	table="<table border='1'><th>Id</th><th>Name</th><tbody>"+table+"</tbody></table>";

	document.write(table);
	}, null);
}

Kết quả:

Id

Name

1 peter
2 paul

Bạn cũng thế xem các database được tạo ra trong thẻ Resources của Chrome Developer Tools (Ctrl+Shift+I):

Chrome Developer Tools - Web SQL Database

Ví dụ hoàn chỉnh

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS CUSTOMERS(id unique, name)");
tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [1,"peter"]);
tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [2,"paul"]);
});

db.readTransaction(function(tx){
	showCustomers(tx);
});

function showCustomers(tx)
{
	var table="",row="";
	var i;
	tx.executeSql("SELECT * FROM CUSTOMERS", [], function (tx1, results) {

	for (i=0;i < results.rows.length; i++){
		var customer=results.rows.item(i);
		row="<td>"+customer.id+"</td>";
		row+="<td>"+customer.name+"</td>";

		table+="<tr>"+row+"</tr>";
	}
	table="<table border='1'><th>Id</th><th>Name</th><tbody>"+table+"</tbody></table>";

	document.write(table);
	}, null);
}

</script>
</head>
<body>

</body>
</html>

YinYang’s Programming Blog

24 thoughts on “HTML5 – Web SQL Database

    • Bởi vì nó phụ thuộc vào từng trình duyệt nên vị trí này sẽ do mỗi trình duyệt quyết định. Thông thường thì các dữ liệu sẽ được lưu trong cùng thư mục với ứng dụng hoặc một thư mục dành riêng để lưu trữ dữ liệu cho mỗi ứng dụng.
      Chẳng hạn với Chrome thì bạn có thể xem trong thư mục sau:

      C:\Documents and Settings\{USERNAME}\Local Settings\Application Data\Google\Chrome\User Data\Default\

      Trả lời
  1. Chào Yin Yang. Mình thấy HTML5 khá là hay,mình cũng đang có ý định tìm hiểu về html5. Xem qua ví dụ của bạn thì mình đã hiểu vấn đề. Bạn và mọi người đang tìm hiểu về html5 đúng không? các bạn có thể giúp mình được không?
    Mình đang có ý định viết ứng dụng html5 rồi up lên facebook:
    – kết nối webcam bằng javascript (no flash)
    – Tạo hiệu ứng cho hình ảnh chụp được từ webcam( giống như trong Cyberlink You Cam hoặc ghép hình Hàn Quốc)
    – Sau khi xử lý xong thì có thể cho phép người dùng up lên web hoặc tải về máy tính

    Hiện tại mình đã kết nối được webcam và xử lý màu cho hình ảnh rồi, còn cái xử lý hiệu ứng và ghép cảnh thì mình chưa làm được. Mong các bạn giúp đỡ

    Trả lời
  2. Bạn chỉ có thể kết nối dựa vào phương thức openDatabase() và phải biết rõ các tham số của db thôi. Tuy nhiên có vẻ kĩ thuật này không được ứng dụng bởi vì đa số họ đang tập trung vào IndexedDB. Chỉ cần một trong các trình duyệt phổ biến không hỗ trợ tính năng này (Web SQL Database) thì xem như nó sẽ không được sử dụng rồi.

    Trả lời
    • Đúng vậy, vì W3C đã thôi không phát triển đặc tả cho Web SQL, Án Bình Trọng nên tập trung cho Local Storage và Indexed Database, và cũng luôn lưu ý rằng database ở client chỉ là database dành riêng cho cá nhân. Với câu hỏi của Án Bình Trọng, vì file database.db nằm ở server trong khi các sql databse mà client truy xuất được phải nằm ở local storage (isolated storage). ^^

      Trả lời
      • Em đang gặp 1 vấn đề lớn: Đó là viết 1 ứng dụng cho phép chạy file flv, mp4 và webM, bên dưới bài miêu tả đoạn video trên. Viết trên WPF thì nó chưa hỗ trợ mp4, webM, nghĩ tới Html5 thì nó không hỗ trợ truy xuất Database tạo sẵn(vì em không xài WebServer). Vậy có công nghệ nào bù đắp cho khiếm khuyết của WPF hoặc Html5 không?

      • Câu trả lời là vẫn ok không có vấn đề gì. Em có thể chọn sử dụng WinJS cho Windows 8, với Windows 7 thì sử dụng WPF + cái control web browser gì đó thì phải (anh ko chuyên WPF). Chạy mã HTML5 trong ứng dụng WPF là câu chuyện không khó và cũng không cần xài web server. Ngoài ra mp4 và webM không phải là thứ hiếm có khó tìm đến nổi em không tìm được một dll hỗ trợ việc chơi nó trên WPF. ^^

      • Cám ơn anh nhiều. Em không chuyên về WPF(vì tự học), đụng tới là làm nên vẫn chưa biết cách làm sao để host 1 trang html5 chạy trên wpf. Trên mạng em thấy có dll WPF MediaKit hỗ trợ phát video Mp4, flv, webM, nhưng tiếc là em vẫn không thể tìm được bài hướng dẫn hoàn chỉnh về cách sử dụng (tác giả chỉ giới thiệu tính năng + code 1 số thứ, nhưng không hướng dẫn chi tiết)

      • Anh ơi, em không thể liên lạc với anh ở trang Tumivn (bị báo lỗi khi gởi thư liên hệ) nên em xin hỏi anh ở đây:
        Dường như đã rất lâu rồi, trang MSDN Việt Nam đã đóng cửa và em thấy hình như không còn hoạt động nữa. Em nghĩ anh là MVP, nên em hỏi anh: Là hiện nay, Microsoft có hỗ trợ diễn đàn nào hoạt động, giới thiệu công nghệ mới của Microsoft nữa hay không? Nếu có, em xin hỏi anh địa chỉ đó là gì.
        Cuối cùng, em xin cảm ơn anh nhiều.

      • @Án Bình Trọng: MSDNvietnam.net là một dự án bị failed của MS Việt Nam. Hiện tại ở VN không có trang chính thức nào khác của MS hỗ trợ cho developer, anh đang cố gắng giới thiệu các công nghệ mới của Microsoft thông qua d.jou.vn. Về phần lập trình WPF, anh nghĩ nó đơn giản, em có thể nhờ Yin Yang làm một bài nho nhỏ về Web Browser control trên WPF. ^^

  3. – Các bạn cho mình hỏi 1 chút nha: Web SQL Database có thể chạy độc lập với các hệ quản trị khác như: SQL Server, MySql, oracle…trong các ứng dụng.

    – Web SQL Database được lưu phía client thì người dùng có thể truy xuất tới tài nguyên. Yêu cầu đặt ra là vấn đề bảo mật như thế nào? Còn có cách nào khác ngoài việc truyền tham số thứ 2 trong phương thức executeSql

    – Việc xử lý dữ liệu của Web SQL Database diễn ra như thế nào: tức là nó sẽ lấy dữ liệu từ phía server về client xử lý, sau khi xử lý xong thì nó sẽ đẩy dữ liệu đã xử lý về server hay theo 1 cơ chế nào khác….

    Mình có hỏi 1 số thầy cô nhưng chưa ai tìm hiểu cái này hết, lên 1 số diễn đàn và hội thảo của trường dh Khoa Học Tự Nhiên thì chỉ nhận được những câu nói chung chung. Nếu ai biết cái này thì chia sẻ với mình nha. Xin cảm ơn

    Trả lời

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s