通过90行代码学会HTML5 WebSQL的4种基本操作
Web SQL數(shù)據(jù)庫API是一個(gè)獨(dú)立的規(guī)范，在瀏覽器層面提供了本地對結(jié)構(gòu)化數(shù)據(jù)的存儲，已經(jīng)被很多現(xiàn)代瀏覽器支持了。
我們通過一個(gè)簡單的例子來了解下如何使用Web SQL API在瀏覽器端創(chuàng)建數(shù)據(jù)庫表并存儲數(shù)據(jù)。
<!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>在瀏覽器里執(zhí)行這個(gè)應(yīng)用，會創(chuàng)建一個(gè)名叫mydb的數(shù)據(jù)庫，里面一張名為“user”的數(shù)據(jù)庫表，并且插入一條記錄進(jìn)去，然后從數(shù)據(jù)庫表中讀取中來，打印在瀏覽器上。
下面就來分析下這90行代碼。
程序的入口是setupDB這個(gè)函數(shù)，下面的setInterval起了1個(gè)間隔為200毫秒的周期執(zhí)行函數(shù)，為了模擬當(dāng)前瀏覽器除了進(jìn)行Web SQL數(shù)據(jù)庫外，還有其他的任務(wù)再執(zhí)行。
setupDB
用promise實(shí)現(xiàn)了一個(gè)鏈?zhǔn)秸{(diào)用，第九行代碼從語義上來說很容易理解：首先創(chuàng)建數(shù)據(jù)庫(createDatabase)，然后創(chuàng)建數(shù)據(jù)庫表(createTable)，然后插入一條記錄到數(shù)據(jù)庫表里(insertEntry), 然后馬上把剛才插入表里的記錄讀出來(readEntry)。最后打印到瀏覽器上。
大家看我第16行的_createDatabaseOK的函數(shù)延時(shí)1秒執(zhí)行，僅僅是為了演示W(wǎng)ebSQL API 異步調(diào)用的最佳實(shí)踐。
createDatabase函數(shù)的第15行，調(diào)用了Web SQL API的openDatabase，創(chuàng)建了一個(gè)名為mydb的數(shù)據(jù)庫。openDatabase會返回一個(gè)數(shù)據(jù)庫句柄，我們保存在屬性_db里以便后續(xù)使用。
createTable
使用前一步驟得到的數(shù)據(jù)庫句柄，通過數(shù)據(jù)庫句柄暴露的API transaction, 執(zhí)行一個(gè)數(shù)據(jù)庫事務(wù)。事務(wù)的具體內(nèi)容是一個(gè)SQL語句，通過executeSql調(diào)用來創(chuàng)建數(shù)據(jù)庫表：
create table if not exists user(id unique, user, passwd)
用過JDBC的朋友對這種寫法應(yīng)該很熟悉。
數(shù)據(jù)庫表明為user，主鍵為id，有兩個(gè)列user和passwd。
insertEntry
在前一步驟中創(chuàng)建的user數(shù)據(jù)庫表中插入一行記錄，id為1，user值為Jerry，passwd為1234。
insert into user values (1,‘Jerry’,‘1234’)
readEntry
還是通過第一步創(chuàng)建的數(shù)據(jù)庫句柄_db, 執(zhí)行一個(gè)數(shù)據(jù)庫事務(wù)，內(nèi)容為SELECT語句，從user表里讀出所有記錄。
如果想清除掉Web SQL里的數(shù)據(jù)庫表，在Chrome開發(fā)者工具里點(diǎn)擊Clear storage：
選中您要清除的Storage類型，點(diǎn)“Clear Site Data"即可。
要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:
總結(jié)
以上是生活随笔為你收集整理的通过90行代码学会HTML5 WebSQL的4种基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 地下城安图恩开放时间
- 下一篇： jquery插件Jplayer如何使用