HMTL5 本地数据库

数据库这个东东现在也可以用在web上了，目前为止, chrom 6 以上版本，opera 10 以上，safari 5以上支持这个功能.

htm4中数据库只能放在服务器，只能通过服务器来访问，但是在html5中，可以像访问本地文件那样轻松的对内置数据库进行访问。

HMTL5中内置了两种本地数据库，一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite，另一种是是被称为indexedDB 的数据库，我们今天说一下“SQLLite”数据库。

首先介绍几个方法

1.openDatabase() 方法

　　　　openDatabase 方法是用来创建一个访问数据库的对像。如下所示：　　

　var db = openDatabase('mydb',"1.0",'Text db',102400);

　　该方法有四个参数：

数据库名称。
数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
对数据库的描述。
设置分配的数据库的大小（单位是kb）

　　初次调用时创建数据库，以后就是建立连接了。

2. transaction() 方法

　　该方法用来执行事务处理，使用事务处理，可以防止在对数据库进行访问及执行有关操作时受到的外界的干扰。

db.transaction(function(tx,rs){
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique,Log))') 
})

transaction 方法使用一个回调函数作为参数，在这个函数中，执行访问数据库的语句。

3.executeSql执行查询

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

这个方法有四个参数

需要执行的SQL语句。
SQL语句中所使用到参数的数组（将SQL语句中的所要使用到的参数先用“?” 来代替，然后依次放入数组中）

　例：transaction.executeSql("UPDATE people set ag=? where name=?",[age,name]);

SQL执行成功后的回调函数

　function dataHandler(tx,rs){//SQL成功后处理方法}// tx为transaction对像，rs 返回的结果数据集对像;

SQL执行后失败的回调

接下来看一下，对成功返回后结果集的一个处理；

结果数据集对像有一个rows属性，其中保存了查询到的每一条记录。条数用rows.length来获取。可以用for循环，用rows[index] 或 rows.Item([index])来获取。一般采用rows[index]的形式。

接下来做一个简单的例子:

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地数据库</title>
</head>
<body onload="init()">
    <h1>使用本地数据库实现web留</h1>
    <table>
        <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" value="保存"></td>
        </tr>
    </table>
    <table id="datatable" border="1">
    </table>
    <p id="msg"></p>
</body>
</html>

js:

<script>
    var datatable = null;
    var db = openDatabase("MyData","",'test DB',2*1024*1024); //创建数据库
    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");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        td1.innerHTML = row.name;
        td2.innerHTML = row.message;
        var t = new Data();
        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){
            tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT , message TEXT,time INTEGER)',[]);
            tx.executeSql('SELECT * FROM MsgData',[],function(tx,rs){
                removeAllData();
                for (var i = 0; i < rs.rows.length; i++) {
                    showData(rs.rows[i]);
                };
            })
        })
    }
    function addData(name,message,time){
        db.transaction(function(tx){
            tx.executeSql('insert into MsgData value(?,?,?)',[name,message,time],function(tx,rs){
                alert("成功保存");
            },function(tx,error){
                alert(error.source+":"+error.message)
            })
        })
    }
    function saveData(){
        var name = document.getElementById('name').value;
        var memo = document.getElementById('memo').value;
        var time = new Date().getTime();
        showAllData();
    }

</script>

posted @ 2015-10-29 16:09 兔&&大梅阅读(269) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

兔&&大梅

HMTL5 本地数据库

公告