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