本地数据库-SQLLite

来源：互联网发布：编程语言实现模式源码编辑：程序博客网时间：2024/06/05 14:10

在H5，web时代又回到了“客户端为重，服务器端为轻”的时代。原因是什么呢？在H4中，数据库只能放在服务器端，而在H5，我么可以像访问本地文件那样，轻松地对内置数据库进行访问。H5有两种数据库，一种是SQLLite，看见SQL就知道，这个也是可以通过SQL语言来访问的，另一种是indexedDB，NoSQL类型的数据库。

和服务器端数据库一样，本地我们也要去执行相应的数据库步骤：1创建访问数据库的对象 2进行各项操作处理。

在这里，SQLLite，使用openDatabase方法，创建访问数据库的对象。

例如： var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);

以上有四个参数：数据库名字，版本，数据库描述，数据库大小。在这里执行上边这段代码，如果有这个数据库，那么返回访问对象，如果没有，则创建该数据库，再返回访问对象。

用过数据库的同学都知道，web上有很多人访问这个页面，那么，如果你在对数据库进行操作的时候，恰巧别人也在对该数据库进行操作，这样岂不是乱套了，心儿拔凉拔凉的。。。好在我们有解决办法是吧，我们通过调用transaction方法，执行事务处理，进而防止对数据库访问时收到外界的干扰。

db.transaction(function(tx){

tx.executeSql('CREATE TABLE IF NOT EXITS LOGS(id unique,Log)');

});

使用executeSql进行查询。

在这里，我们看一下完整的定义

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

此处一共有4个参数：

第一个参数就是需要执行的SQL语句，

第二个参数是SQL语句中需要的参数数组，例如：transaction.executrSql("UPDATE people set age=? where name=?",[age,name]);

第三个是执行SQL成功的回调函数 function dataHandler(transaction,results){ //OK处理}

第四个是执行SQL失败的回调函数 function errorHandler(transaction,errmsg){ //error 处理}

那么，我们查出来的数据怎么进行显示呢？JS里，当然是用for循环了，结果数据集对象里有rows属性，我们通过遍历它，rows[index],依次读取里面的数据。

使用web数据库实现留言板

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>数据库版留言板</title>    <script>        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) {                tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)',[]);                tx.executeSql('SELECT * FROM MsgData',[],function (tx,rs) {                    console.log(rs);                removeAlldata();                for(var i=0;i<rs.rows.length;i++){                    showData(rs.rows.item(i));                }                });            });        }        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);                });            });        }        function saveData() {            var name=document.getElementById('name').value;            var mymsg=document.getElementById('mymsg').value;            var time=new Date().getTime();            addData(name,mymsg,time);            showAllData();        }    </script></head><body onload="init();">    <h1>用数据库实现留言板</h1>    <table>        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>        <tr><td>留言：</td><td><input type="text" id="mymsg"></td></tr>        <tr>            <td></td>            <td><input type="button" value="保存" onclick="saveData()"></td>        </tr>    </table>    <hr>    <table id="datatable" border="1"></table>    <p id="msg"></p></body></html>

阅读全文

1 0