關於h5本地資料庫的基本介紹（適合初學者）

Html5工作上用了有一段時間了，但一直沒有系統的學習過，最近把Html5系統的擼了一遍，把一些學習到的知識陸續更新#出來（每週末更新一週所得或存貨），適合初學者看，如果你是大神.........請飄過。

好，直奔主題

HTML5中，為了減輕伺服器的負擔和提高Web應用程式效能，將原本必須要保存在伺服器上的資料轉為保存在客戶端本地。可以像存取本機檔案一樣輕鬆地對內建資料庫進行直接存取。 HTML5中內建了兩種本機資料庫，一種為SQLLite，一種為indexedDB。這次簡單的簡單的介紹下SQLLite。

在寫這篇文章時，查詢了下 Web SQL Database（SQLLite），很不幸地看到了這個

官網截圖

大概意思是：此規範不再處於主動維護中，Web應用程式工作組不打算繼續維護。
已經要廢棄了...........這可是我寫的第一篇技術博客，哎............含淚繼續寫，了解下總沒壞處！

SQLLite核心的方法有3個

1. openDatabase：這個方法用來建立資料庫物件並傳回實例

2. transaction ：這個方法用來控制交易提交或回溯

3. executeSql：這個方法用來執行SQL 查詢(SQLLite 可以用sql來執行增刪改查)

#openDatabase

例如，想要建立資料庫

//参数意义依次为  数据库名字，版本，数据库描述，数据库大小
var db = openDatabase("myData", "1.0", "MyDataBase", 1024 * 100);

這樣就可以建立一個本地的Web SQL Database  ,傳回值 「db」  為這個資料庫的實例。

transaction&executeSql

transaction方法用來處理事務，當一條語句執行失敗的時候，回滾整個事物。
executeSql方法用於執行SQL語句，傳回結果。

請看程式碼

//打开一个事物,传入一个包含事务内容的一个方法
//在事物中使用executeSql执行sql创建一张表
 db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS message(name TEXT,content TEXT,time TET)", [], 
        function() {
        //执行成功回调函数（该参数可选传与不传）
        }, function(error) {
        //执行失败回调函数（该参数可选传与不传）
        }),
        //在表中插入一条数据
        tx.executeSql("INSERT INTO message VALUES(?,?,?)", ["zhong", "web sql database", ''2017 ']);
        })

執行以上程式碼在chrome控制台中查看

執行結果

成功插入一條數據！ ！ ！

我們再來查詢一下這條資料

db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM message", [], function(tx, rs) {
           //执行成功回调函数，返回执行结果  rs ,我们将 rs 循环
            for (var i = 0; i < rs.rows.length; i++) {
               //打印出查询的结果
                console.log(rs.rows.item(i))
            }
        },
        function(eror) {})
})

在chrome控制台中查看

執行結果.png

結束！有興趣的小夥伴可以繼續深入研究下。希望對大家有幫助，不足請指教。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#

以上是關於h5本地資料庫的基本介紹（適合初學者）的詳細內容。更多資訊請關注PHP中文網其他相關文章！