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. 如何使用LIBSVM，从安装到基本实例使用
			
    1.在eclipse上安装libsvm 下载libsvm压缩包解压到本地目录,下载地址http://www.csie.ntu.edu.tw/~cjlin/libsvm/index.html 如图: 2 ...
    
			
    2. 
						
  2. iOS多线程开发之离不开的GCD（上篇）
			
    一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的方法来进⾏并发程序编写.从基本功能上讲,GCD有点像NSOperatio ...
    
			
    3. 
						
  3. Spring MVC 项目搭建 -5- spring security 使用数据库进行验证
			
    Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id  ...
    
			
    4. 
						
  4. linux虚拟机下解压文件
			
    pscp命令上传文件到linux虚拟机   项目开发过程中,经常需要从windows向linux服务器上传下载文件.下面简单介绍一下如何上传下载文件. 下载安装putty软件:https://pan. ...
    
			
    5. 
						
  5. 使用Cain&Abel进行网络嗅探
			
    启动Cain&Abel并切换到"sniffer(嗅探)"标签. 第一步:需要对Cain&Abel进行配置,先单击最上面的"Configure(配置)&qu ...
    
			
    6. 
						
  6. 如何使用SVN？
			
      一.什么是SVN? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁 ...
    
			
    7. 
						
  7. linux可用更新源
			
    Kali 2.0更新源kali-rolling:#中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contribde ...
    
			
    8. 
						
  8. Android系统--输入系统（十三）Dispatcher线程情景分析_Reader线程传递事件
			
    Android系统--输入系统(十三)Dispatcher线程情景分析_Reader线程传递事件 1. 输入按键 我们知道Android系统的按键分为三类:(1)Global Key;(2)Syste ...
    
			
    9. 
						
  9. Luogu 1060 开心的金明 / NOIP 2006 （动态规划）
			
    Luogu 1060 开心的金明 / NOIP 2006 (动态规划) Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨 ...
    
			
    10. 
						
  10. 还在为画“类Word文档报表”而发愁吗？
			
    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~​ Word 是非常强大的文档编辑工具,一些行业制式文档都是使用Word来创建的,像教育行业的申请表,履历表,审批表等,像石油业的 ...
    
			
    11.