HTML5本地数据库

最新推荐文章于 2021-06-04 18:34:33 发布

木子PZ

最新推荐文章于 2021-06-04 18:34:33 发布

阅读量1.6k

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/sinat_24044741/article/details/51853736

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

数据库类型

HTML5的本地数据库有两种：sqlLite和IndexedDB (NoSQL类型)

数据库操作

创建访问数据库的对象

 var db = openDatabase("mydb","1.0","test db",1024*100);

第一个参数为”数据库的名称”，第二个参数为”数据库的版本号”，第三个参数为”数据库的描述”，第四个参数为数据库的大小。（回调函数可省略）
！！返回的是访问数据库的对象，当数据库不存在时再创建。

2 .使用事务处理（使用事务处理可以防止多人同时岁数据库的数据进行更改曹成的数据不一致问题）

db.transaction(function(tx) {
    tx.executesSql("",[],onsuccess,onerror);
});

第一个参数为”数据库的操作语句(select、delete、insert等)”，第二个参数是一个数组，里面存放的数据就是在第一个参数的sql语句中使用“？”的地方的具体值（如：insert into tab values(?,?,?);），第三个参数是执行成功之后的回调函数，第四个参数是执行失败后的回调函数。

3.sqlLite数据库在本机中的保存位置（本人用的是联想，根据型号不同，路径略有不同，有的是C:\Users\Administrator…,如果未找到相应文件夹，尝试显示隐藏文件夹。）
C:\Users\lenovo\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_63342
文件可以用SQLLite的管理工具（如：SQLiteSpy）打开

知行网的一个用sqlLite制作留言本的例子

例子链接 http://www.zhixing123.cn/asp/35884.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用本地数据库制作留言本</title>
    <script>
        var datatabe = null;
        var db = openDatabase("MyData","","my database",1024*100);       //四个参数分别为：“数据库名称”，“版本号”，“数据库描述”，数据库大小
                                                                            //返回的是访问数据库的对象，当数据库不存在时，再创建
        function init() {
            datatabe = document.getElementById('datatable');
            showAllData();
        }

        function removeAllData() {

            for(var i = datatabe.childNodes.length - 1;i>=0;i--){
                datatabe.removeChild(datatabe.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);
            datatabe.appendChild(tr);
        }

        function showData(row) {         //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
            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);
            datatabe.appendChild(tr);
        }

        function showAllData() {
            db.transaction(function(tx) {
                tx.executeSql("create table if not exists msgdata(name TEXT,message TEXT,time INTEGER)",[]);
                removeAllData();   //对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
                tx.executeSql("select * from msgdata",[],function(tx,rs) {
                    for(var i = 0;i<rs.rows.length;i++) {
                        showData(rs.rows.item(i));       //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
                    }
                },function(tx,error){});
            })
        }

        function addData(name,message,time) {            //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
            db.transaction(function(tx) {
                tx.executeSql("insert into msgdata values(?,?,?)",[name,message,time],function(tx,rs){        //使用事务处理可以防止多个人同时对数据库的数据进行更改，造成数据不一致
                    //transaction的四个参数分别为：“sql语句”，一个数组，里面存放的就是第一个参数的sql语句中使用“？”的地方的具体值；第三个参数是执行成功后的回调函数；第四个参数是执行失败后的回调函数
                    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();       //得到当前的系统时间
            addData(name,memo,time);                //将用户名，用户信息，当前时间存到数据库中
            showAllData();                         //更新下方<p id="msg">的表格显示
        }
    </script>
</head>
<body onload="init()">
<table>
    <tr><td>姓名：<input type="text" id="name" /></td></tr>
    <tr><td>留言：<input type="text" id="memo" /></td></tr>
    <tr>
        <td></td>
        <td><input type="button" value="保存" onclick="saveData()"/></td>
        <td><input type="button" value="清除" onclick="removeAllData()"/></td>
    </tr>
</table>
<table id="datatable" border="1"></table>
<p id="msg"></p>
</body>
</html>