1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script src="sql.js"></script>
7 </head>
8 <!--打开网页即调用init()函数，显示已存数据-->
9 <body onload="init()">
10    <table>
11        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
12        <tr><td>留言：</td><td><input type="text" id="memo"></td></tr>
13        <tr>
14            <td></td>
15            <!--事件触发-->
16            <td><input type="button" value="保存" onclick="saveData()"></td>
17        </tr>
18    </table>
19 <hr>
20 <table id="datatable" border="1">
21    <p id="msg"></p>
22 </table>
23 </body>
34 </html>






sql.js
 1 // 1、创建访问数据库的对象

 // 2、使用事务处理

 var datatbale = null;

 var db = openDatabase("Mydata","","My Database",1024*100);

 /*

     openDatabase(),作用打开数据，如果数据库不存在，则会创建一个新的数据库。

     五个参数说明：数据库名称、版本号、描述文本、数据库大小、创建回调

 */

 function init() {

     datatbale = document.getElementById("datatable");

     showAllData();

 }

 //清除数据，保留表头

 function removeAllData() {

     for(var i = datatbale.childNodes.length -1; i>=0;i--){

         datatbale.removeChild(datatbale.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);

     datatbale.appendChild(tr);

 }

 //显示数据

 function showData(row) {

     var tr = document.createElement("tr");

     var td1 = document.createElement("td");

     td1.innerHTML = row.name;

     var td2 = document.createElement("td");

     td2.innerHTML = row.message;

     var td3 = document.createElement("td");

     var t = new Date();

     t.setTime(row.time);

     td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();

     tr.appendChild(td1);

     tr.appendChild(td2);

     tr.appendChild(td3);

     datatbale.appendChild(tr);

 }

 //事件处理，先清除数据再利用for循环调用showData()函数显示所有数据

 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) {

     /*

     transaction()函数,用以处理事务：

     包含事务内容的一个方法

     执行成功回调函数（可选）

     执行失败回调函数（可选）

     */

     db.transaction(function (tx) {

         /*

         executeSql()函数用以执行SQL语句，返回结果，方法有四个参数

         1、查询字符串

         2、用以替换查询字符串中问号的参数

         3、执行成功回调函数（可选）

         4、执行失败回调函数（可选）

         */

         tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)",[name,message,time],function (tx,rs) {

             alert("成功");

         },

             function (tx,erro) {

                 alert(erro.source+"::"+erro.message);

             }

         )

     })

 }

 //保存数据，并调用showAllData()函数显示所有数据

 function saveData() {

     var name = document.getElementById("name").value;

     var memo = document.getElementById("memo").value;

     var time = new Date().getTime();

     addData(name,memo,time);

     showAllData();

 }




												


											
HTML5 — Wed SQL 本地数据库示例的更多相关文章
	

    
								
  1. （二）HTML5 - Web SQL 本地数据库
		
    简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...
    
		
    2. 
						
  2. HTML5 Web SQL Database 数据库的使用方法【图文说明】
		
    页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
    
		
    3. 
						
  3. SQL 本地数据库
		
      先写一个数据库帮助器: public class MyDBHelper extends SQLiteOpenHelper { private static final String DB_NAME ...
    
		
    4. 
						
  4. SQL Server 本地数据库登录不上 解决方法
		
    sql本地数据库登录不了的话.先看看自己计算机 服务 SQL server  (MSSQLSERVER)  没有打开的话,请打开. 今天说的情景模式是  你误删了windows登录:禁用了sa登录:s ...
    
		
    5. 
						
  5. 与众不同 windows phone (7) - Local Database（本地数据库）
		
    原文:与众不同 windows phone (7) - Local Database(本地数据库) [索引页][源码下载] 与众不同 windows phone (7) - Local Databas ...
    
		
    6. 
						
  6. HTML5中的本地、WebSql、离线应用存储
		
    1.   HTML5存储相关API a)   Localstorage 本地存储 b)   Web Sql DataBase 本地数据库存储 c)   .manifest 离线应用存储 2.   HT ...
    
		
    7. 
						
  7. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
		
    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
    
		
    8. 
						
  8. HTML5教程之html 5 本地数据库（Web Sql Database）
		
    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
    
		
    9. 
						
  9. 【HTML5】HTML5本地数据库（Web Sql Database）
		
    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. solr的基本概念
			
    一.solr的基本概念 大家可以把solr搜索引擎看成一个数据库,不过是基于内存的.它可以存储信息,并且根据你的查询条件返回你想要的信息. 1.collection和core的概念 collectio ...
    
			
    2. 
						
  2. CSS 实现流布局以及多列混合布局
			
    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...
    
			
    3. 
						
  3. 关于 静态页面布局 中的一些BUG
			
    作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
    
			
    4. 
						
  4. gulp-rev-append静态资源添加版本号后缀，清理缓存
			
    大多用的是gulp-rev.gulp-rev-collerctor两个插件,但过程有点麻烦,使用gulp-rev-append插件轻松搞定 github:   https://github.com/b ...
    
			
    5. 
						
  5. CJOJ 2040 【一本通】分组背包（动态规划）
			
    CJOJ 2040 [一本通]分组背包(动态规划) Description 一个旅行者有一个最多能用V公斤的背包,现在有n件物品,它们的重量分别是W1,W2,...,Wn,它们的价值分别为C1,C2, ...
    
			
    6. 
						
  6. 51nod_1605:棋盘问题
			
    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1605 题目中最有用的点其实还是x必为奇数 #include& ...
    
			
    7. 
						
  7. linux基础（五）
			
    一.linux网络原理及基础设置 ifconfig 命令:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址. [root@bogon ~]# ifconfig ens33: flags=41 ...
    
			
    8. 
						
  8. spring 的单例模式
			
    singleton---单例模式 单例模式,在spring 中其实是scope(作用范围)参数的缺省设定值每个bean定义只生成一个对象实例,每次getBean请求获得的都是此实例 单例模式分为饿汉模 ...
    
			
    9. 
						
  9. ibatis 参数和结果的映射处理
			
    SqlMapClient对象 这个对象是iBatis操作数据库的接口(执行CRUD等操作),它也可以执行事务管理等操作.这个类是我们使用iBATIS的最主要的类.它是线程安全的.通常,将它定义为单例. ...
    
			
    10. 
						
  10. C# 代码规范和质量检查工具 StyleCop.Analyzers
			
    简介 原来一直用 ReSharper 来进行代码质量检查,不过毕竟是收费的,所以想找个免费的可以推广给公司的同事也一起用.搜索了一下,找到了StyleCop,但是我在 VS 2015里安装 Style ...
    
			
    11.