HTML5本地数据库应用-优快云博客

本文链接：https://blog.youkuaiyun.com/hlx20080808/article/details/64125196

HTML5大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。在HTML5中，可以像访问本地文件那样轻松地对内置数据库进行直接访问。

HTML5中内置了两种本地数据库，一种为SQLLite，一种为indexedDB。

（1）创建访问数据库对象

   /*不存在时创建数据库*/
  /*  参数：数据库名称，版本号，数据库描述，数据库的大小*/
     var db = openDatabase("mydb","1.0","my test db",1024*100);

（2）使用事务处理

      //事务
    db.transaction(function(tx){
     
    tx.executeSql("");
    /*参数： 执行的sql语句,sql参数数组，success回调函数，error回调函数*/
    transaction.executeSql("", [],function(){},function(){});
    //rows属性  rows.length; rows[index]
    });
（3）使用数据库进行Web留言
     <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--1.创建访问数据的对象
2.使用事务处理-->
    <script type="text/javascript" src="sql2.js"></script>
</head>


<body οnlοad="init()">
<table>
    <tr>
        <td>姓名：</td>
        <td><input  type="text" name="name" id="name"/> </td>
    </tr>

    <tr>
        <td>留言：</td>
        <td><input type="text" name="say" id="say" style="width:500px;"/> </td>
    </tr>

    <tr>
        <td></td>
        <td><input  type="button" value="保存" οnclick="saveData()"/> </td>
    </tr>
</table>

<hr/>
 <table border="1" id="datatable">

 </table>

<p id="msg"></p>
</body>
</html>

sql2.js
/**
 * Created by Administrator on 2017-03-20.
 */

var datatable = null;
/*不存在时创建数据库*/
/*  参数：数据库名称，版本号，数据库描述，数据库的大小*/
var db = openDatabase("MyData", "", "mydatatable description", 1024 * 100);

//(1)初始化数据
function init() {
    datatable = document.getElementById("datatable");
    //显示所有的
    showDataAll();
}

//(2)移除所有的数据
function removeAll() {
    //遍历
    for (var i = datatable.childNodes.length - 1; i >= 0; i--) {
        datatable.removeChild(datatable.childNodes[i]); //移除每一个孩子
    }
    //自定义的tr,th
    var tr = document.createElement("tr");
    var th1 = document.createElement("th");
    var th2 = document.createElement("th");
    var th3 = document.createElement("th");

    //添加th1,2,3的内容
    th1.innerHTML = "姓名";
    th2.innerHTML = "留言";
    th3.innerHTML = "时间";

    //追加数据
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    //添加到表格中
    datatable.appendChild(tr);
}

//显示数据
function showData(row) {
    //自定义tr,td1,td2,td3
    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 showDataAll(){
    //事务
    db.transaction(function (tx) {
        /*参数： CRUD,sql数组，success回调函数，error回调函数*/
        tx.executeSql("create table if not exists student(name TEXT,message TEXT,time INTEGER)",[]);

        //查询语句
        tx.executeSql("select * from student",[],function(tx,rs){
            removeAll(); //移除所有的数据
            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 student values(?,?,?)",[name,message,time],function(tx,rs){
               // alert("ok");
                document.getElementById("msg").innerHTML="ok";
            },
            function(tx,error){
               // alert(error.source+"::"+error.message);
                document.getElementById("msg").innerHTML=error.source+"::"+error.message;
            }
        );
    });
}

//保存数据
function saveData(){
    var name = document.getElementById("name").value;
    var message = document.getElementById("say").value;
    var time = new Date().getTime();
    // alert(name+"--->"+message);
    //调用方法
    addData(name,message,time);

    //显示所有的
    showDataAll();
}

效果:

再次打开数据时，还是存在的，保存在本地的数据库中了！

HTML5 本地数据库