HTML5 SQLLite初体验

今天看了看HTML5 里面有一个本地的数据库，感觉挺有意思的，简单了解了一下，代码如下。

<!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);

　　

 

posted @ 2016-05-12 15:27  miracle.tao  阅读(1236)  评论(0)    收藏  举报