zoukankan      html  css  js  c++  java

  • (转)HTML5 本地数据库（SQLite） 示例

     
    HTML5 本地数据库（SQLite） 示例
    2012-05-07 16:21:13
    标签：SQLite HTML5 本地数据库
    原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://supercharles888.blog.51cto.com/609344/856071

    按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子，感觉这个功能蛮好玩的，但是还不够强大，尤其浏览器支持力度不够：

    HTML代码：

    1. <!DOCTYPE html> 
    2. <head> 
    3. <meta charset="UTF-8"> 
    4. <title>使用HTML5本地数据库DEMO</title> 
    5. <script type="text/javascript" src="js/operateDB.js"></</script> 
    6. </head> 
    7.  
    8. <body onload="init();"> 
    9. <h1>使用HTML5本地数据库DEMO</h1> 
    10. <table> 
    11.     <tr><td>姓名：</td><td><input type="text" id="name"></td></tr> 
    12.     <tr><td>资料：</td><td><input type="text" id="info"></td></tr> 
    13.     <tr> 
    14.         <td></td> 
    15.         <td><input type="button" value="保存" onclick="saveData();"></td> 
    16.     </tr> 
    17. </table> 
    18. <hr> 
    19. <table id="datatable" border="1"></table> 
    20. <p id="msg"></p> 
    21. </body> 

    javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。

    1. /* 
    2.  * This file is confidential by Charles.Wang Copyright belongs to Charles.wang 
    3.  * You can make contact with Charles.Wang (charles_wang888@126.com) 
    4.  */ 
    5.   
    6.  //这个是下方的表格元素 
    7.  var datatable = null; 
    8.   
    9.  //创建一个数据库对象 
    10.  //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小 
    11.  var db = openDatabase('MyData','','My Database',102400); 
    12.   
    13.  //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录 
    14.  function init(){ 
    15.     //取得下方的表格元素，并且赋值给全局变量 
    16.     datatable = document.getElementById("datatable"); 
    17.      
    18.     //显示所有已经在数据库中存储的记录 
    19.     showAllData(); 
    20.  } 
    21.   
    22.  //removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录） 
    23.  function removeAllData(){ 
    24.     //首先，它将<table>下面的所有子元素全部清除 
    25.     //所以，这里它对于datatable组件进行遍历 
    26.     for(var i=datatable.childNodes.length-1;i>=0;i--){ 
    27.         datatable.removeChild(datatable.childNodes(i)); 
    28.     } 
    29.      
    30.     //全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th> 
    31.     //创建表头行到文档树中 
    32.     var tr= document.createElement('tr'); 
    33.     //表头行的第一个表头 
    34.     var th1=document.createElement('th'); 
    35.     //表头行的第二个表头 
    36.     var th2=document.createElement('th'); 
    37.     //表头行的第三个表头 
    38.     var th3=document.createElement('th'); 
    39.     //设置这3个表头的文本 
    40.     th1.innerHTML="姓名"; 
    41.     th2.innerHTML="资料"; 
    42.     th3.innerHTML="时间"; 
    43.     //将这些表头依次放在表头行中 
    44.     tr.appendChild(th1); 
    45.     tr.appendChild(th2); 
    46.     tr.appendChild(th3); 
    47.     //将这个新创建的表头行挂到表格中 
    48.     datatable.appendChild(tr); 
    49.  } 
    50.   
    51.  //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录 
    52.  function showData(row){ 
    53.      //构建一个表行用于取得当前所要的信息 
    54.      var tr= document.createElement('tr'); 
    55.      //创建第一列，这一列是姓名 
    56.      var td1=document.createElement('td'); 
    57.      //填充第一列的信息为该行的name 
    58.      td1.innerHTML=row.name; 
    59.      //创建第二列，这一列是留言 
    60.      var td2=document.createElement('td'); 
    61.      //填充第一列的信息为该行的message 
    62.      td2.innerHTML=row.info; 
    63.     //创建第三列，这一列是日期 
    64.      var td3=document.createElement('td'); 
    65.      //创建一个日期对象 
    66.      var t = new Date(); 
    67.      t.setTime(row.time); 
    68.      //将日期的标准形式和国际化日期形式分别设置给当前列 
    69.      td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString(); 
    70.      //吧这三列挂到当前行中 
    71.      tr.appendChild(td1); 
    72.      tr.appendChild(td2); 
    73.      tr.appendChild(td3); 
    74.      //让这个表格在后面加上这一行 
    75.      datatable.appendChild(tr); 
    76.  } 
    77.   
    78.  //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的 
    79.  function showAllData(){ 
    80.     //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句 
    81.     db.transaction(function(tx){ 
    82.         //首先它创建一个数据库表，里面有3个字段 
    83.         tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]); 
    84.         //创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)） 
    85.         //然后定义了一个回调函数，表明对于结果集的处理 
    86.         tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs){ 
    87.              
    88.             //对于结果集，首先，在获取它之前移除页面上的<table>的所有数据 
    89.             removeAllData(); 
    90.             //遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本 
    91.             for(var i=0;i<rs.rows.length;i++){ 
    92.                 //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断） 
    93.                 showData(rs.rows.item(i)); 
    94.             } 
    95.         }); 
    96.     } 
    97.   
    98.     ); 
    99.  } 
    100.   
    101.  //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。 
    102.  function addData(name,info,time){ 
    103.     //开启一个数据库事务 
    104.     //回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容 
    105.     db.transaction(function(tx){ 
    106.          
    107.         //插入的语句是个模板语句 
    108.         //插入成功的回调就是在控制台上输入一行日志 
    109.         tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){ 
    110.             console.log("成功保存数据!"); 
    111.         }, 
    112.         //插入失败的回调就是在控制台上输入一行错误日志 
    113.         function(tx,error){ 
    114.             console.log(error.source+"::"+error.message); 
    115.         }); 
    116.     } 
    117.      
    118.     ); 
    119.  } 
    120.   
    121.  //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数 
    122.  function saveData(){ 
    123.     //从HTML页面中取得2个输入框的文本 
    124.     var name=document.getElementById('name').value; 
    125.     var info=document.getElementById('info').value; 
    126.     //得到当前的系统时间 
    127.     var time= new Date().getTime(); 
    128.     //将用户名，用户信息，当前时间存到数据库中 
    129.     addData(name,info,time); 
    130.     //更新下方<p id="msg">的表格显示 
    131.     showAllData(); 
    132.  }

    我在Google Chrome上做了测试，以下是截图：

    Chrome我使用的版本是最新版的，假定我安装到了C:Documents and Settingscharles.wangLocal SettingsApplication DataGoogleChrome

    那么SQLite数据库就安装到了$CHROME_HOMEUser DataDefaultdatabases中

    这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录：

    我们使用SQLite管理工具打开这2个文件，就可以很清楚的看到：

    在Databases.db中配置了所用到的数据库：

    这和我们js中的设定一样：

    1. //创建一个数据库对象 
    2.  //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小 
    3.  var db = openDatabase('MyData','','My Database',102400); 
    4.  

    而当我们打开数据库文件，则可以看到：

    这些数据库中的记录正是我们在页面上所展示的。

    局限性：

    可惜，我测试了下程序员最喜欢用的Firefox浏览器（版本号12），可惜它并不支持这种本地数据库SQLite，如图(我打开了Firebug的console)：

    希望以后这个问题可以得到改善，毕竟用Firefox的人还是很多的，尤其程序员。

    本文出自 “平行线的凝聚” 博客，请务必保留此出处http://supercharles888.blog.51cto.com/609344/856071

    分享至
    		一键收藏，随时查看，分享好友！
    sonichy、Peter潘、EDMyingxiao
    3人
    		 了这篇文章
    类别：HTML5┆阅读(9227)┆评论(6) ┆ 返回博主首页┆返回博客首页
    上一篇 HTML5 利用json对象来存取复杂数据 下一篇 HTML5 播放video或者audio
  • 相关阅读:
    POJ 3373 Changing Digits 记忆化搜索
    POJ 3268 Silver Cow Party (Dijkstra + 优先队列)
    ZOJ 1232 Adventure of Super Mario (Floyd + DP)
    POJ 2406 Power Strings KMP算法之next数组的应用
    POJ 1961 Period KMP算法之next数组的应用
    POJ 2492 A Bug's Life 并查集的应用
    POJ 1703 Find them, Catch them 并查集的应用
    POJ 3321 Apple Tree 树状数组+DFS
    POJ 3368 Frequent values 线段树与RMQ解法
    POJ 3264 Balanced Lineup RMQ ST算法
  • 原文地址：https://www.cnblogs.com/zhang-pengcheng/p/4289588.html
Copyright © 2011-2022 走看看