database client (Sqlite)
1. 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);
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);
2. Transaction
Bạn cần thực thi các câu SQL trong ngữ cảnh của một transactio n. 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 SQLTransac tionCallback 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
});
Bạn cần thực thi các câu SQL trong ngữ cảnh của một transactio n. 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 SQLTransac tionCallback 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
});
3. 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"]);
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"]);
Note: các transaction trên thực thi bất đồng bộ(các dòng lệnh chạy ko theo thứ tự)
code ex
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #222;
font: 14px Arial;
}
body a {
color: #3D5C9D;
text-decoration: none;
}
</style>
<script>
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
var test = false;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
[todoText, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
test = true;
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
console.log("1");
if(rs.rows.length == 0){
test = false;
html5rocks.webdb.addTodo(111);
}else{
test = true;
}
}
function renderTodo(row) {
return "<li>" + row.todo + " [<a href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
console.log("2");
/*if(test==true){
html5rocks.webdb.getAllTodoItems(loadTodoItems);
console.log("3");
}*/
console.log("4");
}
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}
</script>
</head>
<body onload="init();">
<ul id="todoItems">
</ul>
<form type="post" onsubmit="addTodo(); return false;">
<input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
<input type="submit" value="Add Todo Item"/>
</form>
</body>
</html>
No comments:
Post a Comment