首页前端开发HTMLHTML5中本地数据库（SQLLite）的基础

HTML5中本地数据库（SQLLite）的基础

时间2024-01-26 17:13:03发布访客分类HTML浏览396
导读：收集整理的这篇文章主要介绍了html5教程-HTML5中本地数据库（SQLLite）的基础，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 在htm...
收集整理的这篇文章主要介绍了html5教程-HTML5中本地数据库（SQLLite）的基础，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

在html5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问。
htML5中内置了两种数据库，一种为SQLLITe,另一种为indexedDB。

在js中使用SQLLite数据库的步骤：

1.创建访问数据库的对象

       VAR db = oPEnDatabase("myDB","1.0","test db",1024*100);

说明：
1. 该方法返回的是创建的数据库的对象，如果该数据库不存在才会创建这个数据库。
2. 第一个参数：数据库的名称
第二个参数：数据库的版本号
第三个参数：数据库的描述
第四个参数：数据库的大小

2.使用事务处理

       db.transaction(function(tx){
                 tx.executeSql("");
         }
    )

说明：
1.使用事务处理的原因：可以防止对数据库进行访问、执行有关操作时受到外界的干扰。在web上可能同时有很多人对网页进行访问，如果在访问数据库的过程中，正在操作的数据库被其他用户修改了，会引起很多意想不到的结果，因此使用事务来达到操作完成之前阻止其他用户对数据库的访问。
2.function(tx)：是一个回调函数
3.tx.executeSql()：该方法是用来执行sql语句的。
transaction.executeSql(sqlquery,[],dataHandler,errorHandler)
第一个参数：是数据库操作的sql语句
第二个参数：sql语句中所使用的参数的数组
第三个参数：成功执行sql语句后调用的回调函数，
function dataHandler(transaction,results)
第四个参数：执行sql语句时，如果出错调用的回调函数，
function errorHandler(transaction,errmsg)

案例：网络留言板

html代码：

 !DOCTYPE html>
     html>
     head lang="en">
         meta charset="UTF-8">
         title>
    /title>
         script src="html5TestJS.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>
    input type="button" value="保存" onclick="saveData()">
    /td>
                 td>
    input type="button" value="删除某个表" onclick="dropTable()">
    /td>
             /tr>
         /table>
     hr>
     table border="1" id="datatable">
    /table>
         p id="msg">
    /p>
     /body>
     /html>

js文件：

 /**  * Created by Administrator on 2016/5/6 0006.  */ var datatable = null;
     var db = openDatabase("MyData","","My Database",1024*100);
  function init(){
         datatable = document.getElementById("datatable");
         showAllData();
 }
  //删除html中table下的所有的子节点 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 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){
                 removeAllData();
                 for(var i=0;
    i

效果演示：

开发者这工具中的数据库表中的数据信息：

在html5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问。
html5中内置了两种数据库，一种为SQLLite,另一种为indexedDB。

在js中使用SQLLite数据库的步骤：

1.创建访问数据库的对象

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

说明：
1. 该方法返回的是创建的数据库的对象，如果该数据库不存在才会创建这个数据库。
2. 第一个参数：数据库的名称
第二个参数：数据库的版本号
第三个参数：数据库的描述
第四个参数：数据库的大小

2.使用事务处理

       db.transaction(function(tx){
                 tx.executeSql("");
         }
    )

说明：
1.使用事务处理的原因：可以防止对数据库进行访问、执行有关操作时受到外界的干扰。在web上可能同时有很多人对网页进行访问，如果在访问数据库的过程中，正在操作的数据库被其他用户修改了，会引起很多意想不到的结果，因此使用事务来达到操作完成之前阻止其他用户对数据库的访问。
2.function(tx)：是一个回调函数
3.tx.executeSql()：该方法是用来执行sql语句的。
transaction.executeSql(sqlquery,[],dataHandler,errorHandler)
第一个参数：是数据库操作的sql语句
第二个参数：sql语句中所使用的参数的数组
第三个参数：成功执行sql语句后调用的回调函数，
function dataHandler(transaction,results)
第四个参数：执行sql语句时，如果出错调用的回调函数，
function errorHandler(transaction,errmsg)

案例：网络留言板

html代码：

 !DOCTYPE html>
     html>
     head lang="en">
         meta charset="UTF-8">
         title>
    /title>
         script src="html5TestJS.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>
    input type="button" value="保存" onclick="saveData()">
    /td>
                 td>
    input type="button" value="删除某个表" onclick="dropTable()">
    /td>
             /tr>
         /table>
     hr>
     table border="1" id="datatable">
    /table>
         p id="msg">
    /p>
     /body>
     /html>

js文件：

 /**  * Created by Administrator on 2016/5/6 0006.  */ var datatable = null;
     var db = openDatabase("MyData","","My Database",1024*100);
  function init(){
         datatable = document.getElementById("datatable");
         showAllData();
 }
  //删除html中table下的所有的子节点 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 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){
                 removeAllData();
                 for(var i=0;
    i

效果演示：

开发者这工具中的数据库表中的数据信息：

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divHTMLhtml5letpost-format-gallery数组

若转载请注明出处： HTML5中本地数据库（SQLLite）的基础
本文地址： https://pptw.com/jishu/587045.html
HTML5 New Feature Series: Geolocation HTML5新特性之客户端数据库(IndexedDB)

游客 回复需填写必要信息
↑