溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5中WebSQL四種基本操作的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Web SQL數據庫API是一個獨立的規范，在瀏覽器層面提供了本地對結構化數據的存儲，已經被很多現代瀏覽器支持了。
我們通過一個簡單的例子來了解下如何使用Web SQL API在瀏覽器端創建數據庫表并存儲數據。
<!doctype html>
<html>
<head>
<script>
var end;
function setupDB() {
return this.createDatabase().then(createTable).then(insertEntry).then(readEntry).then(printResult);
}
function createTable() {
return new Promise(function(resovle, reject) {
console.log("prepare to create table..." + Date.now());
this._db.transaction(function(query) {
query.executeSql('create table if not exists user(id unique, user, passwd)');
});
setTimeout(_createTableOK.bind(this, resovle), 1000);
});
}
function _createTableOK(resovle) {
console.log("table created successfully..." + Date.now());
resovle();
}
function createDatabase() {
return new Promise(function(resovle, reject) {
console.log("prepare to create database..." + Date.now());
this._db = openDatabase('mydb', '1.0', 'JerryTestdb', 1024);
setTimeout(_createDatabaseOK.bind(this, resovle), 1000);
});
}
function _createDatabaseOK(resovle) {
console.log("database created successfully..." + Date.now());
resovle(this._db);
}
function insertEntry() {
return new Promise(function(resolve, reject) {
this._db.transaction(function(query) {
query.executeSql("insert into user values (1,'Jerry','1234')");
});
setTimeout(_insertEntryOK.bind(this, resolve), 1000);
});
}
function _insertEntryOK(resolve) {
console.log("entry inserted to table successfully..." + Date.now());
resolve();
}
function readEntry() {
return new Promise(function(resolve, reject) {
this._db.transaction(function(query) {
query.executeSql('select * from user', [], function(u, results) {
setTimeout(_readEntryOK.bind(this, resolve, results), 1000);
}); // end of query.executeSql
} // end of function(query)
); // end of this._db.transaction
});
}
function _readEntryOK(resolve, oResult) {
console.log("entry readed from DB successfully..." + Date.now());
resolve(oResult);
}
function printResult(oResults) {
for (var i = 0; i < oResults.rows.length; i++) {
document.writeln('id: ' + oResults.rows[i].id);
document.writeln('user: ' + oResults.rows[i].user);
document.writeln('passwd: ' + oResults.rows[i].passwd);
}
end = true;
}
function work() {
if (end) {
clearInterval(handle);
} else {
console.log(" working..." + Date.now());
}
}
setupDB();
var handle = setInterval(work, 200);
</script>
</head>
</html>在瀏覽器里執行這個應用，會創建一個名叫mydb的數據庫，里面一張名為“user”的數據庫表，并且插入一條記錄進去，然后從數據庫表中讀取中來，打印在瀏覽器上。
下面就來分析下這90行代碼。
程序的入口是setupDB這個函數，下面的setInterval起了1個間隔為200毫秒的周期執行函數，為了模擬當前瀏覽器除了進行Web SQL數據庫外，還有其他的任務再執行。
setupDB
用promise實現了一個鏈式調用，第九行代碼從語義上來說很容易理解：首先創建數據庫(createDatabase)，然后創建數據庫表(createTable)，然后插入一條記錄到數據庫表里(insertEntry), 然后馬上把剛才插入表里的記錄讀出來(readEntry)。最后打印到瀏覽器上。
大家看我第16行的_createDatabaseOK的函數延時1秒執行，僅僅是為了演示WebSQL API 異步調用的最佳實踐。
createDatabase函數的第15行，調用了Web SQL API的openDatabase，創建了一個名為mydb的數據庫。openDatabase會返回一個數據庫句柄，我們保存在屬性_db里以便后續使用。
createTable
使用前一步驟得到的數據庫句柄，通過數據庫句柄暴露的API transaction, 執行一個數據庫事務。事務的具體內容是一個SQL語句，通過executeSql調用來創建數據庫表：
create table if not exists user(id unique, user, passwd)
用過JDBC的朋友對這種寫法應該很熟悉。
數據庫表明為user，主鍵為id，有兩個列user和passwd。
insertEntry
在前一步驟中創建的user數據庫表中插入一行記錄，id為1，user值為Jerry，passwd為1234。
insert into user values (1,'Jerry','1234')
readEntry
還是通過第一步創建的數據庫句柄_db, 執行一個數據庫事務，內容為SELECT語句，從user表里讀出所有記錄。
如果想清除掉Web SQL里的數據庫表，在Chrome開發者工具里點擊Clear storage：
選中您要清除的Storage類型，點“Clear Site Data"即可。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5中WebSQL四種基本操作的示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
