Nội dung chính
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);
Phương thức trên nhận 5 tham số sau:
- Tên Database
- Số phiên bản
- Mô 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 = "Found rows: " + len + "
";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
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>
