HTML5 本地数据库(SQLite) 示例

简介:

 按照国内一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 Settings\charles.wang\Local Settings\Application Data\Google\Chrome

那么SQLite数据库就安装到了$CHROME_HOME\User Data\Default\databases

这个目录中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的人还是很多的,尤其程序员。





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/856071,如需转载请自行联系原作者

目录
相关文章
|
1月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
7天前
|
存储 SQL 数据库
数据库知识:了解SQLite或其他移动端数据库的使用
【10月更文挑战第22天】本文介绍了SQLite在移动应用开发中的应用,包括其优势、如何在Android中集成SQLite、基本的数据库操作(增删改查)、并发访问和事务处理等。通过示例代码,帮助开发者更好地理解和使用SQLite。此外,还提到了其他移动端数据库的选择。
18 8
|
18天前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
21 4
|
26天前
|
存储 关系型数据库 数据库
轻量级数据库的利器:Python 及其内置 SQLite 简介
轻量级数据库的利器:Python 及其内置 SQLite 简介
50 3
|
28天前
|
应用服务中间件 PHP Apache
PbootCMS提示错误信息“未检测到您服务器环境的sqlite3数据库扩展...”
PbootCMS提示错误信息“未检测到您服务器环境的sqlite3数据库扩展...”
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
10天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
2月前
|
存储 API 数据库
QML使用Sqlite数据库存储ListModel数据
本文介绍了在QML中使用Sqlite数据库存储ListModel数据的方法,包括如何创建数据库、读取数据、动态添加和删除数据,以及如何在程序启动和退出时与数据库同步数据。
|
2月前
|
数据库 数据库管理
qt对sqlite数据库多线程的操作
本文总结了在Qt中进行SQLite数据库多线程操作时应注意的四个关键问题,包括数据库驱动加载、加锁、数据库的打开与关闭,以及QsqlQuery变量的使用。