本文转载自http://blog.sina.com.cn/s/blog_641cf27f01016pm5.html

按照国内一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. 
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.getElementByIdx_x("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_x('tr');
33.     //表头行的第一个表头
34.     var th1=document_createElement_x('th');
35.     //表头行的第二个表头
36.     var th2=document_createElement_x('th');
37.     //表头行的第三个表头
38.     var th3=document_createElement_x('th');
39.     //设置这3个表头的文本
40.     th1.innerHTML="姓名";
41.     th2.innerHTML="资料";
42.     th3.innerHTML="时间";
43.     //将这些表头依次放在表头行中
44.     tr.a(th1);
45.     tr.a(th2);
46.     tr.a(th3);
47.     //将这个新创建的表头行挂到表格中
48.     datatable.a(tr);
49.  }
50.  
51.  //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
52.  function showData(row){
53.      //构建一个表行用于取得当前所要的信息
54.      var tr= document_createElement_x('tr');
55.      //创建第一列，这一列是姓名
56.      var td1=document_createElement_x('td');
57.      //填充第一列的信息为该行的name
58.      td1.innerHTML=row.name;
59.      //创建第二列，这一列是留言
60.      var td2=document_createElement_x('td');
61.      //填充第一列的信息为该行的message
62.      td2.innerHTML=row.info;
63.     //创建第三列，这一列是日期
64.      var td3=document_createElement_x('td');
65.      //创建一个日期对象
66.      var t = new Date();
67.      t.setTime(row.time);
68.      //将日期的标准形式和国际化日期形式分别设置给当前列
69.      td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString();
70.      //吧这三列挂到当前行中
71.      tr.a(td1);
72.      tr.a(td2);
73.      tr.a(td3);
74.      //让这个表格在后面加上这一行
75.      datatable.a(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.getElementByIdx_x('name').value;
125.     var info=document.getElementByIdx_x('info').value;
126.     //得到当前的系统时间 www.2cto.com
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);

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

这些数据库中的记录正是我们在页面上所展示的。
 
 
局限性：
可惜，我测试了下程序员最喜欢用的Firefox浏览器（版本号12），可惜它并不支持这种本地数据库SQLite，如图(我打开了Firebug的console)：

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

HTML5本地数据库（SQLite）示例的更多相关文章

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

      HTML5 本地数据库(SQLite) 示例 2012-05-07 16:21:13 标签:SQLite HTML5本地数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作 ...

  2. HTML5本地数据库(WebSQL)[转]

    除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...

  3. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  4. [转载]Unity3D 游戏引擎之使用C＃语言建立本地数据库(SQLITE)

    以前在开发中一直使用IOS源生的数据库,通过传递消息的形式在与Unity3D中进行交互.本文我在详细说说如何使用C#语言来在MAC 操作系统下创建Unity本地数据库,我是C#控哇咔咔--- 首先你需 ...

  5. html5本地数据库(一)

    本地数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important ...

  6. QT 创建本地数据库(SQLite数据库)存储数据

    注意:QT自带SQLITE数据库,不需要再安装 1.创建一个包含创建.查询.修改和删除数据库的数据库类(DataBase) DataBase.h头文件 #pragma once #include &l ...

  7. HTML5 本地数据库（SQLite） 示例

    http://supercharles888.blog.51cto.com/609344/856071 http://www.sqlite.org/download.html

  8. iOS:本地数据库sqlite的介绍

    一.数据库的概念: 1..什么是数据库 SQL Server 2010.Oracle.MySQL 关系数据库 NoSQL数据库-非关系型数据库   数据库主要由表组成 表由字段组成 数据 就是表中的记 ...

  9. 轻量级本地数据库SQLite在WinRT的使用

    开发环境:Windows 8.1 开发工具:Visual Studio Express 2013 for Windows SQLite数据库介绍 1.SQLite是一款轻型的嵌入式数据库,使用C++开 ...

随机推荐

  1. Learning to rank 介绍

    PS:文章主要转载自CSDN大神hguisu的文章"机器学习排序":          http://blog.csdn.net/hguisu/article/details/79 ...

  2. SpringBoot应用部署[转]

    在开发spring Boot应用的过程中,Spring Boot直接执行public static void main()函数并启动一个内嵌的应用服务器(取决于类路径上的以来是Tomcat还是jett ...

  3. SQL 常用操作

    今天网龙笔试遇到了几个SQL题,现在顺便就总结一下常用的SQL操作. 内连接:只将符合条件的行显示出来 SELECT s.name,m.mark FROM student s,mark m WHERE ...

  4. SQL联合查询（内联、左联、右联、全联）的语法（转）

    最近在做一个比较复杂的业务,涉及的表较多,于是在网上找了一些sql联合查询的例子进行研究使用. 概述: 联合查询效率较高,举例子来说明联合查询:内联inner join .左联left outer j ...

  5. 深入浅出RxJava

    深入浅出RxJava(一:基础篇) 深入浅出RxJava(二:操作符) 深入浅出RxJava三--响应式的好处 深入浅出RxJava四-在Android中使用响应式编程 RxJava 到底是什么? 一 ...

  6. 8.Android 系统状态栏沉浸式/透明化解决方案

    转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来 ...

  7. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  8. spoj 371 Boxes

    N个盒子围成一圈,第i个盒子初始时有Ai个小球,每次可以把一个小球从一个盒子移到相邻的两个盒子之一里.问最少移动多少次使得每个盒子中小球的个数不超过1. ΣAi<=N.1<=N<=1 ...

  9. 用TTS实现文本转语音

    最近被toefl单词虐成狗::>_<:: 想做一个可以自动把单词转成语音的软件,这样就可以在路上戴耳机边走边听啦~ 用微软的TTS语音库可以很容易地实现.早期的TTS要想实现中英文混合朗读 ...

  10. Redis模式匹配删除key

    Redis keys命令支持模式匹配,但是del命令不支持模式匹配,有时候需要根据一定的模式来模糊删除key,这时只能结合shell命令来完成了. 具体命令是: redis-cli KEYS &quo ...