HTML5 - Cơ sở dữ liệu Web SQL
API cơ sở dữ liệu Web SQL thực sự không phải là một phần của đặc tả HTML5 nhưng nó là một đặc tả riêng giới thiệu một tập hợp các API để thao tác cơ sở dữ liệu phía máy khách bằng cách sử dụng SQL.
Tôi cho rằng bạn là một nhà phát triển web tuyệt vời và nếu đúng như vậy thì chắc chắn bạn sẽ biết rõ về các khái niệm SQL và RDBMS. Nếu bạn vẫn muốn có một phiên với SQL sau đó, bạn có thể xem qua Hướng dẫn SQL của chúng tôi .
Cơ sở dữ liệu Web SQL sẽ hoạt động trong phiên bản Safari, Chrome và Opera mới nhất.
Các phương pháp cốt lõi
Có ba phương pháp cốt lõi sau đây được xác định trong thông số kỹ thuật mà tôi sẽ trình bày trong hướng dẫn này -
openDatabase - Phương thức này tạo đối tượng cơ sở dữ liệu bằng cách sử dụng cơ sở dữ liệu hiện có hoặc tạo mới.
transaction - Phương pháp này cung cấp cho chúng tôi khả năng kiểm soát giao dịch và thực hiện cam kết hoặc khôi phục 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 tế.
Mở cơ sở dữ liệu
Các OpenDatabase phương pháp chăm sóc mở một cơ sở dữ liệu nếu nó đã tồn tại, phương pháp này sẽ tạo ra nó nếu nó đã không tồn tại.
Để tạo và mở cơ sở dữ liệu, hãy sử dụng đoạn mã sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);Phương thức trên lấy năm tham số sau:
- Tên cơ sở dữ liệu
- Số phiên bản
- Mô tả văn bản
- Kích thước của cơ sở dữ liệu
- Gọi lại tạo
Đối số cuối cùng và thứ 5, lệnh gọi lại tạo sẽ được gọi nếu cơ sở dữ liệu đang được tạo. Tuy nhiên, không có tính năng này, các cơ sở dữ liệu vẫn đang được tạo nhanh chóng và được tạo phiên bản chính xác.
Thực thi truy vấn
Để thực hiện một truy vấn, bạn sử dụng hàm database.transaction (). Hàm này cần một đối số duy nhất, đây là một hàm đảm nhận việc thực thi truy vấ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)');
});Truy vấn trên sẽ tạo một bảng có tên LOGS trong cơ sở dữ liệu 'mydb'.
INSERT hoạt động
Để tạo các yêu cầu vào bảng, chúng tôi 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ể chuyển các giá trị động trong khi tạo nhập 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 bên ngoài, và executeSql ánh xạ từng mục trong đối số mảng thành "?" s.
ĐỌC hoạt động
Để đọc các bản ghi hiện có, chúng tôi sử dụng một lệnh gọi lại để thu thập các 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);
});Ví dụ cuối cùng
Vì vậy, cuối cùng, chúng ta hãy giữ ví dụ này trong một tài liệu HTML5 chính thức như sau và cố gắng chạy nó bằng 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>Điều này sẽ tạo ra kết quả sau: