Web SQL數據庫

時間 2019-11-08

標籤 web sql 數據庫欄目 HTML 简体版

原文原文鏈接

一、數據庫的大小的限制以瀏覽器而定，通常大小不要超過5MB，若是超過限制，應用程序會提示終端用戶是否容許數據限額增加，若是容許，數據庫大小限制會提高到10MB，若是拒絕的話，將會提示QUOTA_ERR數據庫錯誤碼javascript

二、WebSQL爲客戶端關係型數據庫，但瀏覽器支持不是很好，目前chrome支持的最好，其餘瀏覽器部分版本支持。html

websql.htmljava

<!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.jsweb

/**
*數據庫操做輔助類,定義對象、數據操做方法都在這裏定義
*/
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);
        });
    });
}