站長(zhǎng)資訊網(wǎng)Html5工作上用了有段時(shí)間了，但一直沒(méi)有系統(tǒng)的學(xué)習(xí)過(guò)，最近把Html5系統(tǒng)的擼了一遍，把一些學(xué)習(xí)到的知識(shí)陸續(xù)更新出來(lái)（每周末更新一周所得或者存貨），適合初學(xué)者看，如果你是大神………請(qǐng)飄過(guò)。
好，直奔主題
HTML5中，為了減輕服務(wù)器的負(fù)擔(dān)和提高Web應(yīng)用程序性能，將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶(hù)端本地。可以像訪問(wèn)本地文件那樣輕松地對(duì)內(nèi)置數(shù)據(jù)庫(kù)進(jìn)行直接訪問(wèn)。HTML5中內(nèi)置了兩種本地?cái)?shù)據(jù)庫(kù)，一種為SQLLite，一種為indexedDB。這次簡(jiǎn)單的簡(jiǎn)單的介紹下SQLLite。
在寫(xiě)這篇文章時(shí)，查詢(xún)了下 Web SQL Database（SQLLite），很不幸看到了這個(gè)
官網(wǎng)截圖
大概意思是 ：此規(guī)范不再處于主動(dòng)維護(hù)中，Web應(yīng)用程序工作組不打算繼續(xù)維護(hù)。
已經(jīng)要廢棄了………..這可是我寫(xiě)的第一篇技術(shù)博客，哎…………含淚繼續(xù)寫(xiě)，了解下總沒(méi)壞處！
SQLLite核心的方法有3個(gè)
-
openDatabase：這個(gè)方法用于創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象并返回實(shí)例
-
transaction：這個(gè)方法用于控制事務(wù)提交或回滾
-
executeSql：這個(gè)方法用于執(zhí)行SQL 查詢(xún)(SQLLite 可以用sql來(lái)來(lái)執(zhí)行增刪改查)
openDatabase
例如，想要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)
//參數(shù)意義依次為 數(shù)據(jù)庫(kù)名字，版本，數(shù)據(jù)庫(kù)描述，數(shù)據(jù)庫(kù)大小 var db = openDatabase("myData", "1.0", "MyDataBase", 1024 * 100);
這樣就可以創(chuàng)建一個(gè)本地的Web SQL Database ,返回值 “db” 為這個(gè)數(shù)據(jù)庫(kù)的實(shí)例。
transaction&executeSql
transaction方法用以處理事務(wù)，當(dāng)一條語(yǔ)句執(zhí)行失敗的時(shí)候，回滾整個(gè)事物。
executeSql方法用以執(zhí)行SQL語(yǔ)句，返回結(jié)果。
請(qǐng)看代碼
//打開(kāi)一個(gè)事物,傳入一個(gè)包含事務(wù)內(nèi)容的一個(gè)方法 //在事物中使用executeSql執(zhí)行sql創(chuàng)建一張表 db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS message(name TEXT,content TEXT,time TET)", [], function() { //執(zhí)行成功回調(diào)函數(shù)（該參數(shù)可選傳與不傳） }, function(error) { //執(zhí)行失敗回調(diào)函數(shù)（該參數(shù)可選傳與不傳） }), //在表中插入一條數(shù)據(jù) tx.executeSql("INSERT INTO message VALUES(?,?,?)", ["zhong", "web sql database", ''2017 ']); })
執(zhí)行以上代碼在chrome控制臺(tái)中查看
執(zhí)行結(jié)果
成功插入一條數(shù)據(jù)！！！
我們?cè)賮?lái)查詢(xún)一下這條數(shù)據(jù)
db.transaction(function(tx) { tx.executeSql("SELECT * FROM message", [], function(tx, rs) { //執(zhí)行成功回調(diào)函數(shù)，返回執(zhí)行結(jié)果 rs ,我們將 rs 循環(huán) for (var i = 0; i < rs.rows.length; i++) { //打印出查詢(xún)的結(jié)果 console.log(rs.rows.item(i)) } }, function(eror) {}) })
在chrome控制臺(tái)中查看
執(zhí)行結(jié)果.png
結(jié)束！有興趣的小伙伴可以繼續(xù)深入研究下。希望對(duì)大家有幫助，不足請(qǐng)指教。
【相關(guān)推薦】
1. 免費(fèi)h5在線視頻教程
2. HTML5 完整版手冊(cè)
3. php.cn原創(chuàng)html5視頻教程
