HTML5 SQLLite初體驗

時間 2019-11-26

原文原文鏈接

今天看了看HTML5 裏面有一個本地的數據庫，感受挺有意思的，簡單瞭解了一下，代碼以下。javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>本地數據庫</title>
    </head>
    <body>
        <h1>使用數據庫實現Web留言本</h1>
        <table border="0" cellspacing="1" cellpadding="1">
            <tr>
                <td>姓名：</td>
                <td><input type="text" id="name"/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" id="memo"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" id="save" value="保存"/></td>
            </tr>
        </table>
        <hr />
        <table border="1" id="datatable" cellspacing="0" cellpadding="0"></table>
        <p id="msg"></p>
         
        <script src="js/database.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

//文檔加載完成執行init方法;
window.onload = init;
var datatable = null;

//建立本地數據庫,獲取數據庫訪問對象。
var db = openDatabase('MyData', '', 'My DataBase', 102400);

//初始化
function init(){
    
    datatable = document.getElementById('datatable');
    showAllData();
    
}

//清空表格數據
function removeAllData(){
    
    //刪除顯示數據的元素。
    for(var i = datatable.childNodes.length - 1; i >= 0; i--){
        datatable.removeChild(datatable.childNodes[i]);
    }
    
    var tr = document.createElement('tr');
    var th1 = document.createElement('th');
    var th2 = document.createElement('th');
    var th3 = document.createElement('th');
    th1.innerHTML = '姓名';
    th2.innerHTML = '留言';
    th3.innerHTML = '時間';
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    datatable.appendChild(tr);
    
}

//顯示數據
function showData(row){
    
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    td1.innerHTML = row.name;
    var td2 = document.createElement('td');
    td2.innerHTML = row.message;
    var td3 = document.createElement('td');
    var t = new Date();
    t.setTime(row.time);
    td3.innerHTML = t.toLocaleDateString() + "  " + t.toLocaleTimeString();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);
}

//顯示全部數據
function showAllData(){
    
    //建立事務，獲取事務管理對象。
    db.transaction(function(tx){
        /**
         * 執行sql語句, 建立表
         * executeSq()函數    參數以下
         *                     sqlQuery        數據庫查詢語句
         *                     []                參數數組，替換SQL語句中的?佔位符。
         *                     dataHandler        成功後執行的回調函數(可選)
         *                     errorHandler    失敗後執行的回調函數(可選)
         */
        tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)', [], function(tx, rs){
            
        }, function(tx, error){
            alert('錯誤')
        });
        
        //執行SQL語句，查詢MsgData 表中的全部數據。
        tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs){
            
            //這裏是SQL執行成功後調用的回調函數。
            removeAllData();
            
            for(var i = 0; i < rs.rows.length; i++){
                showData(rs.rows.item(i));
            }
            
        }, function(tx, error){
            
            alert(error.source + " :: " + error.message);
            console.log(error.source + " :: " + error.message);
            
        });
    });
}

//添加數據
function addData(name, message, time){
    
    //開啓事務
    db.transaction(function(tx){
        
        tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)', [name,message,time], function(tx, rs){
            
            alert("數據保存成功！");
            
        }, function(tx, error){
            
            alert(error.source + " :: " + error.message);
            console.log(error.source + " :: " + error.message);
            
        });
    })
    
}

document.getElementById('save').addEventListener('click', function(){
    
    var name = document.getElementById('name').value;
    var memo = document.getElementById('memo').value;
    var time = new Date().getTime();
    addData(name, memo, time);
    showAllData();
    
}, false);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。