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. require.js详解
			
    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...
    
			
    2. 
						
  2. 程序员必须知道的六大ES6新特性
			
    二 .字符串扩展 1.传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参 ...
    
			
    3. 
						
  3. Wireshark初步入门
			
    第一次捕获数据包 为了能让Wireshark得到一些数据包,你可以开始你的第一次数据包捕获实验了.你可能会想:"当网络什么问题都没有的时候,怎么能捕获数据包呢?" 首先,网络总是有 ...
    
			
    4. 
						
  4. jsp登陆页面验证码在火狐浏览器不能刷新问题处理方案
			
    jsp登陆页面在火狐浏览器验证码不能刷新问题处理方案: <img src="YzmServlet" onClick="this.src='YzmServlet?ti ...
    
			
    5. 
						
  5. poj 1948 Triangular Pastures 小结
			
    Description Like everyone, cows enjoy variety. Their current fancy is new shapes for pastures. The o ...
    
			
    6. 
						
  6. ABP入门系列（20）——使用后台作业和工作者
			
    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1.引言 说到后台作业,你可能条件反射的想到BackgroundWorker,但后台作业并非是后台 ...
    
			
    7. 
						
  7. 面向对象设计模式——观察者(OBSERVER)模式
			
    定义 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.  Observer模式描述了如何建立这种关系.这一模式中的关键对象是目标(subject ...
    
			
    8. 
						
  8. Liunx上传下载和压缩问题分享
			
    昨天紧急需求需要测试,开发远程发了个包需要部署到生产环境.我通过FileZila连接到服务器,然后把补丁包发送到服务器对应路径,通过CRT操作,进行包的解压.重启. 同时,为了配合开发定位问题,需要从 ...
    
			
    9. 
						
  9. 一个简单的java贷款程序
			
    代码如下: //计算贷款package ClassDemo;import javax.swing.JOptionPane; public class ComputeLoan { public stat ...
    
			
    10. 
						
  10. 微信小程序 服务器端生成用户登陆环节的 3rd_session
			
    一.环境: CentOS 6.8 nginx 1.8.0 php 7.0.10 二.背景 最近在开发一个微信小程序,不可避免的涉及到登陆的环节,登录时序图如下: 通过 wx.login() 获取到用户 ...
    
			
    11.