本地数据库-SQLLite_sql lite本地数据库

作者：IT小白 | 2024-04-26 12:29:32

踩

sql lite本地数据库

在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 οnlοad="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="保存" οnclick="saveData()"></td>
        </tr>
    </table>
    <hr>
    <table id="datatable" border="1"></table>
    <p id="msg"></p>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/490986