這段時間公司要求我們做原生iOS和安卓的都轉做H5開發APP,使用的工具HBuilder。公司這麼要求我們也就只能轉行做了。大家都是小白，好在公司有兩位H5大神，他們先給我們一些程式碼看看，所以，我們上手也比較快。在做APP的過程中用到了一些本地儲存，關於本地儲存大家可以看看《App離線本地儲存方案》 。裡面我只說說Web SQL,因為裡面的localstorage，plus.storage和websql都是我使用過的，其中localstorage和plus.storage是以鍵值對的形式儲存，操作比較簡單，但是websql操作資料庫就有點不一樣了，這個我也是搞了一天才除錯好。
在使用HBuilder

介面

資料庫的操作

增刪改查基本就是我們操作資料庫的四個最基本的操作了。
介面按鈕的操作步驟：
新建資料庫–>插入資料–>查詢一條資料–>修改資料–>查詢一條資料–>查詢全部資料–>刪除一條資料–>刪除全部資料。

[LOG] : 新建資料庫  
[LOG] : 插入資料
[LOG] : 插入websqlTable小明成功
[LOG
 
] : 插入websqlTable小紅成功
[LOG] : 插入websqlTable小強成功
[LOG] : 查詢一條資料
[LOG] : NAME = 小明
[LOG] : AGE = 18
[LOG] : HEIGHT = 175cm
[LOG] : WEIGTH = 60kg
[LOG] : 修改資料
[LOG] : 查詢一條資料
[LOG] : NAME = 小明
[LOG] : AGE = 1000  /*修改之後的結果*/
[LOG] : HEIGHT = 175cm
[LOG] : WEIGTH = 60kg
[LOG] : 查詢全部資料
[LOG] : NAME = 小明
[LOG] : AGE = 1000
 

[LOG] : HEIGHT = 175cm
[LOG] : WEIGTH = 60kg
[LOG] : -------- 我是分割線 -------
[LOG] : NAME = 小紅
[LOG] : AGE = 17
[LOG] : HEIGHT = 160cm
[LOG] : WEIGTH = 45kg
[LOG] : -------- 我是分割線 -------
[LOG] : NAME = 小強
[LOG] : AGE = 19
[LOG] : HEIGHT = 185cm
[LOG] : WEIGTH = 70kg
[LOG] : -------- 我是分割線 -------

websql.js檔案：

/**
*資料庫操作輔助類,定義物件、資料操作方法都在這裡定義
*/
var dbname='websql';/*資料庫名*/
var version = '1.0'; /*資料庫版本*/
var dbdesc = 'websql練習'; /*資料庫描述*/
var dbsize = 2*1024*1024; /*資料庫大小*/
var dataBase = null; /*暫存資料庫物件*/
/*資料庫中的表單名*/
var websqlTable = "websqlTable";

/**
 * 開啟資料庫
 * @returns  dataBase:開啟成功   null:開啟失敗
 */
function websqlOpenDB(){
    /*資料庫有就開啟 沒有就建立*/
    dataBase = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
    if (dataBase) {
        alert("資料庫建立/開啟成功!");
    } else{
        alert("資料庫建立/開啟失敗！");
    }
    return dataBase;
}
/**
 * 新建資料庫裡面的表單
 * @param tableName:表單名
 */
function websqlCreatTable(tableName){
//  chinaAreaOpenDB();
    var creatTableSQL = 'CREATE TABLE IF  NOT EXISTS '+ tableName + ' (rowid INTEGER PRIMARY KEY AUTOINCREMENT, NAME text,AGE text,HEIGHT text,WEIGTH text)';
    dataBase.transaction(function (ctx,result) {
        ctx.executeSql(creatTableSQL,[],function(ctx,result){
            alert("表建立成功 " + tableName);
        },function(tx, error){ 
            alert('建立表失敗:' + tableName + error.message);
        });
    });
}
/**
 * 往表單裡面插入資料
 * @param tableName:表單名
 * @param NAME:姓名
 * @param AGE:年齡
 * @param HEIGHT:身高
 * @param WEIGTH:體重
 */
function websqlInsterDataToTable(tableName,NAME,AGE,HEIGHT,WEIGTH){
    var insterTableSQL = 'INSERT INTO ' + tableName + ' (NAME,AGE,HEIGHT,WEIGTH) VALUES (?,?,?,?)';
    dataBase.transaction(function (ctx) {
        ctx.executeSql(insterTableSQL,[NAME,AGE,HEIGHT,WEIGTH],function (ctx,result){
            console.log("插入" + tableName  + NAME + "成功");
        },
        function (tx, error) {
            alert('插入失敗: ' + error.message);
        });
    });
}
/**
 * 獲取資料庫一個表單裡面的所有資料
 * @param tableName:表單名
 * 返回資料集合
 */
function websqlGetAllData(tableName){   
    var selectALLSQL = 'SELECT * FROM ' + tableName;
    dataBase.transaction(function (ctx) {
        ctx.executeSql(selectALLSQL,[],function (ctx,result){
            alert('查詢成功: ' + tableName + result.rows.length);
            var len = result.rows.length;
            for(var i = 0;i < len;i++) {
                console.log("NAME = "  + result.rows.item(i).NAME);
                console.log("AGE = "  + result.rows.item(i).AGE);
                console.log("HEIGHT = "  + result.rows.item(i).HEIGHT);
                console.log("WEIGTH = "  + result.rows.item(i).WEIGTH);
                console.log("-------- 我是分割線 -------");
            }
        },
        function (tx, error) {
            alert('查詢失敗: ' + error.message);
        });
    });
}
/**
 * 獲取資料庫一個表單裡面的部分資料
 * @param tableName:表單名
 * @param name:姓名
 */
function websqlGetAData(tableName,name){    
    var selectSQL = 'SELECT * FROM ' + tableName + ' WHERE NAME = ?'
    dataBase.transaction(function (ctx) {
        ctx.executeSql(selectSQL,[name],function (ctx,result){
            alert('查詢成功: ' + tableName + result.rows.length);
            var len = result.rows.length;
            for(var i = 0;i < len;i++) {
                console.log("NAME = "  + result.rows.item(i).NAME);
                console.log("AGE = "  + result.rows.item(i).AGE);
                console.log("HEIGHT = "  + result.rows.item(i).HEIGHT);
                console.log("WEIGTH = "  + result.rows.item(i).WEIGTH);
            }
        },
        function (tx, error) {
            alert('查詢失敗: ' + error.message);
        });
    });
}
/**
 * 刪除表單裡的全部資料
 * @param tableName:表單名
 */
function websqlDeleteAllDataFromTable(tableName){
    var deleteTableSQL = 'DELETE FROM ' + tableName;
    localStorage.removeItem(tableName);
    dataBase.transaction(function (ctx,result) {
        ctx.executeSql(deleteTableSQL,[],function(ctx,result){
            alert("刪除表成功 " + tableName);
        },function(tx, error){ 
            alert('刪除表失敗:' + tableName + error.message);
        });
    });
}
/**
 * 根據name刪除資料
 * @param tableName:表單名
 * @param name:資料的姓名
 */
function websqlDeleteADataFromTable(tableName,name){
    var deleteDataSQL = 'DELETE FROM ' + tableName + ' WHERE NAME = ?';
    localStorage.removeItem(tableName);
    dataBase.transaction(function (ctx,result) {
        ctx.executeSql(deleteDataSQL,[name],function(ctx,result){
            alert("刪除成功 " + tableName + name);
        },function(tx, error){ 
            alert('刪除失敗:' + tableName  + name + error.message);
        });
    });
}
/**
 * 根據name修改資料
 * @param tableName:表單名
 * @param name:姓名
 * @param age:年齡
 */
function websqlUpdateAData(tableName,name,age){
    var updateDataSQL = 'UPDATE ' + tableName + ' SET AGE = ? WHERE NAME = ?';
    dataBase.transaction(function (ctx,result) {
        ctx.executeSql(updateDataSQL,[age,name],function(ctx,result){
            alert("更新成功 " + tableName + name);
        },function(tx, error){ 
            alert('更新失敗:' + tableName  + name + error.message);
        });
    });
}

html檔案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <script type="text/javascript" src="../../js/websql.js" ></script>
    </head>

    <script>
            function creatTable() {
                console.log("新建資料庫");
                websqlOpenDB();
                websqlCreatTable(websqlTable);
            }
            function insterData() {
                console.log("插入資料");
                websqlInsterDataToTable(websqlTable,"小明","18","175cm","60kg");
                websqlInsterDataToTable(websqlTable,"小紅","17","160cm","45kg");
                websqlInsterDataToTable(websqlTable,"小強","19","185cm","70kg");
            }
            function updateData() {
                console.log("修改資料");
                websqlUpdateAData(websqlTable,"小明","1000")
            }
            function deleteAData() {
                console.log("刪除一條資料");
                websqlDeleteADataFromTable(websqlTable,"小明");
            }
            function deleteAllData() {
                console.log("刪除全部資料");
                websqlDeleteAllDataFromTable(websqlTable);
            }
            function selectAData() {
                console.log("查詢一條資料");
                websqlGetAData(websqlTable,"小明");
            }
            function selectALlData() {
                console.log("查詢全部資料");
                websqlGetAllData(websqlTable);
            }
        </script>

        <style>
            .content {
                padding-top: 50px;
            }
            .websql {
                margin-top: 10px;
            }
            /*設定按鈕樣式*/
            .websql button{
                height: 44px;
                width: 120px;
            }
        </style>

    <body>
        <div class="content">
            <div class="websql">
                <button type="button" onclick="creatTable()">新建資料庫</button>
            </div>
            <div class="websql">
                <!--增-->
                <button type="button" onclick="insterData()">插入資料</button> 
            </div>
            <div class="websql">
                <!--刪-->
                <button type="button" onclick="deleteAData()">刪除一條資料</button>
                <button type="button" onclick="deleteAllData()">刪除全部資料</button>
            </div>
            <div class="websql">
                <!--改-->
                <button type="button" onclick="updateData()">修改資料</button>
            </div>
            <div class="websql">
                <!--查-->
                <button type="button" onclick="selectAData()">查詢一條資料</button>
                <button type="button" onclick="selectALlData()">查詢全部資料</button>
            </div>
        </div>
    </body>
</html>

總結

在使用websql的時候，就是操作資料庫sql的操作，操作的sql語句也是一樣的。前後接觸過CoreDate,FMDB,sqlite3和websql，使用的sql語句都是一樣的，只是不同的平臺和封裝導致具體的使用有些不一致。《【iOS】一種仿京東搜尋歷史記錄的表格的實現(sqlite3的使用)》
這裡有操作CoreDate,FMDB,sqlite3的介紹。