在HTML5中，大大豐富了客戶端本地可以存儲的內容，添加了很多功能將原本必須要保存在服務器上的數據轉為保存在客戶端本地，從而大大提高了web應用程序額的性能，減輕了服務器端的負擔，使web時代重新回到了“客戶端為重，服務器端為輕”的時代。

?? 在這其中，一項非常重要的功能就是對于數據庫的本地存儲功能。在HTML4中，數據庫只能放在服務器端，只能通過服務器來訪問數據庫，但是在HTML5中，可以像訪問本地文件那樣輕松的對內置數據庫進行直接訪問。在HTML5中內置了兩種本地數據庫：SQLLite，可以通過SQL語言來訪問的文件型SQL數據庫；indexedDB，NoSQL類型的數據庫。

?? Web SQL數據庫API實際上不是HTML5規范的組成部分，而是單獨的規范。它通過一套API來操縱客戶端的數據庫。Safari、Chrome、Firefox、Opera等主流瀏覽器都已經支持Web SQL Database。HTML5的Web SQL Databases的確很誘惑人，當你發現可以用與mysql查詢一樣的查詢語句來操作本地數據庫時，你會發現這東西挺有趣的。

?

SQLLite的使用：

先介紹三個核心方法

1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。

2、transaction：這個方法允許我們根據情況控制事務提交或回滾。

3、executeSql：這個方法用于執行真實的SQL查詢。

這三個方法的具體使用方法：

（1）openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是：

• 1，數據庫名稱。
• 2，數據庫的版本號，目前來說傳個1.0就可以了，當然可以不填；
• 3，對數據庫的描述。
• 4，設置分配的數據庫的大小（單位是kb）。
• 5，回調函數(可省略)。初次調用時創建數據庫，以后就是建立連接了。

（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然后通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

參數說明：

• qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；
• value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用“?”代替，然后依次將這些參數組成數組放在第二個參數中
• ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；
• 4,errorHandler：執行失敗時調用的回調函數；

初次調用時創建數據庫，以后就是建立連接了。創建的數據庫就存在本地，路徑如下：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
創建的是一個sqllite數據庫，可以用SQLiteSpy打開文件，可以看到里面的數據。SQLiteSpy是一個綠色軟件，可以百度一下下載地址或SQLiteSpy官方下載；

?

下面將一一將介紹怎樣創建打開數據庫，創建表，添加數據，更新數據，刪除數據，刪除表 。

?

第一步：打開連接并創建數據庫

var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { }); if (!dataBase) { alert("數據庫創建失敗！"); } else { alert("數據庫創建成功！"); }

?

第二步：創建數據表

this.createTable=function() { dataBase.transaction( function(tx) { tx.executeSql( "create table if not exists stu (id REAL UNIQUE, name TEXT)", [], function(tx,result){ alert('創建stu表成功'); }, function(tx, error){ alert('創建stu表失敗:' + error.message); }); }); }

解釋一下，
executeSql函數有四個參數，其意義分別是：
1）表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。
2）插入到查詢中問號所在處的字符串數據。
3）成功時執行的回調函數。返回兩個參數：tx和執行的結果。
4）一個失敗時執行的回調函數。返回兩個參數：tx和失敗的錯誤信息。

?

第三步：執行增刪改查

1）添加數據：

this.insert = function () { dataBase.transaction(function (tx) { tx.executeSql( "insert into stu (id, name) values(?, ?)", [id, '徐明祥'], function () { alert('添加數據成功'); }, function (tx, error) { alert('添加數據失敗: ' + error.message); } ); });

?

2）查詢數據：

?

this.query = function () { dataBase.transaction(function (tx) { tx.executeSql( "select * from stu", [], function (tx, result) { //執行成功的回調函數 //在這里對result 做你想要做的事情吧........... }, function (tx, error) { alert('查詢失敗: ' + error.message); } ); }); }

解釋一下
上面代碼中執行成功的回調函數有一參數result。

result：查詢出來的數據集。其數據類型為 SQLResultSet ，就如同C#中的DataTable。
SQLResultSet 的定義為：

interface SQLResultSet { readonly attribute long insertId; readonly attribute long rowsAffected; readonly attribute SQLResultSetRowList rows; };

其中最重要的屬性—SQLResultSetRowList 類型的 rows 是數據集的“行” 。
rows 有兩個屬性：length、item 。
故，獲取查詢結果的某一行某一列的值 ：result.rows[i].item[fieldname]? 。

3）更新數據

?

this.update = function (id, name) { dataBase.transaction(function (tx) { tx.executeSql( "update stu set name = ? where id= ?", [name, id], function (tx, result) { }, function (tx, error) { alert('更新失敗: ' + error.message); }); }); }

4）刪除數據

?

this.del = function (id) { dataBase.transaction(function (tx) { tx.executeSql( "delete from stu where id= ?", [id], function (tx, result) { }, function (tx, error) { alert('刪除失敗: ' + error.message); }); }); }

?

5）刪除數據表

this.dropTable = function () { dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); }); }

總結

以上是生活随笔為你收集整理的（九）HTML5本地存储——本地数据库SQLLite的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。