极客学院----H5的相关笔记----H5基础（8）

来源：互联网发布：钢琴调律软件编辑：程序博客网时间：2024/05/16 05:24

一.本地数据库

H5中内置了两种本地数据库：SQLLite，IndexedDB

二.executeSql执行查询

1.创建访问数据库的对象  方法：openDatabase()  参数：name:数据库名称            version:当前版本号            displayName:数据库的描述            estimatedSize:数据库的大小2.使用事务处理，用这个可以达到在你操作完成之前，阻止别人对数据库访问的目的   方法：transation()   参数：callback:函数的回调3.常用方法  （1）transaction.executeSql(sqlquery,[],dataHandler,errorHandler)          sqlquery:执行数据库的语句          []:sql语句中所使用到的参数的数组          dataHandler:成功执行sql语句时的回调函数          errorHandler:执行sql语句出错时的回调函数 （2）function dataHandler(transaction,results) 要对数据处理时使用 （3）function errorHandler(transaction,errormsg) 出错时调用的 （4）rows属性：用来保存查询到的每条记录         rows.length：记录的条数

三.使用数据库实现Web留言本(目前只知道360浏览器好用)

webSql.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用数据库实现Web留言本</title>    <script src="webSql.js"></script></head><body onload="init()">    <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="保存" onclick="saveData()"></td>        </tr>    </table>    <hr><!-- 横线 --><!-- 指定一个表来展现保存的内容 -->    <table id="dataTable" border="1">    </table></body></html>

webSql.js

/** * Created by Administrator on 2016/12/23. */var dataTable = null;var db = openDatabase("MyData","","My DataBase",1024*100);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 date = new Date();    date.setTime(row.time);    td3.innerHTML = date.toLocaleDateString() + " " + date.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.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 memo = document.getElementById("memo").value;    var time = new Date().getTime();    addData(name,memo,time);    showAllData();}

0 0