HTML5本地數據庫的使用方法

這篇“HTML5本地數據庫的使用方法”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML5本地數據庫的使用方法”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

將介紹怎樣創建打開數據庫，創建表，添加數據，更新數據，刪除數據，刪除表 。
先介紹三個核心方法
1、openDatabase：這個方法使用現有數據庫或創建新數據庫創建數據庫對象。
2、transaction：這個方法允許我們根據情況控制事務提交或回滾。
3、executeSql：這個方法用于執行真實的SQL查詢。
第一步：打開連接并創建數據庫

代碼如下:

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

解釋一下openDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，它還可以創建數據庫。幾個參數意義分別是：
1，數據庫名稱。
2，版本號 目前為1.0,不管他，寫死就OK。
3，對數據庫的描述。
4，設置數據的大小。
5，回調函數(可省略)。
初次調用時創建數據庫，以后就是建立連接了。
創建的數據庫就存在本地，路徑如下：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
創建的是一個sqllite數據庫，可以用SQLiteSpy打開文件，可以看到里面的數據。SQLiteSpy是一個綠色軟件，可以百度一下下載地址或SQLiteSpy官方下載：SQLiteSpy。
第二步：創建數據表

代碼如下:

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  SQLResultSetRow
List
  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本地數據庫的使用方法”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！