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. Vim练级笔记(持续更新)
			
    漫漫练级路...作为一个VS重度依赖患者,又加上visual assist X 这种懒人必备的神级插件,转投vim门下,真是各种疼... vim用着用着就有拿鼠标去点的冲动,有木有啊! 不过经过一段时 ...
    
			
    2. 
						
  2. 彩扩机项目--NPN和PNP三极管作为开关管的区别
			
    上图是最终画好的电路.使用的是NPN三极管,并且把NPN三极管放在了下面.下面分析下NPN三极管作为开关管能否放在上面. 从上面两张图分析可知,当三极管作为开关管使用的时候,NPN三极管需要放在下面( ...
    
			
    3. 
						
  3. Android精品源码与技术博文
			
    Android精品源码android遵循Material Design风格天气源码基于exoplay 自定义播放器 支持直播 1 ExoUserPlayer 基本播放器...几种动画效果Animati ...
    
			
    4. 
						
  4. C实现dos图文菜单程序实例
			
      前言 公司一台服务器是novell环境,文件管理是基于dos6.22的,客户端启动需要一个图文菜单.   实现    编程环境:汉化版TC2.0 菜单基本功能:显示提示项.显示dbf中的行情信息. ...
    
			
    5. 
						
  5. HDU 5547 Sudoku(DFS)
			
    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=5547 题目: Sudoku Time Limit: 3000/1000 MS (Java/Others ...
    
			
    6. 
						
  6. 小哈学Python第三课-字符集编码
			
    table.hovertable { font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border- ...
    
			
    7. 
						
  7. Hive实战之Youtube数据集
			
    1 数据来源 本次实战的数据来自于"YouTube视频统计与社交网络"的数据集,是西蒙弗雷泽大学计算机学院在2008年所爬取的数据 数据集地址 1. 1 Youtube视频表格式如 ...
    
			
    8. 
						
  8. Odoo之Field
			
    字段描述符包含了字段的定义,下面是实例化一个字段时的属性: class Field(object): :param string: 字段标签(用户所见),如果不设置ORM将取用类的字段名(大写).:p ...
    
			
    9. 
						
  9. Oozie时bin/oozied.sh start或bin/oozied.sh run出现Bootstrap进程无法启动，http://bigdatamaster:11000/oozie界面也无法打开？E0103: Could not load service classes, java.lang.ClassNotFoundException: Class org.apache.oozie.ser
			
    不多说,直接上干货! 问题详情 [hadoop@bigdatamaster oozie--cdh5.5.4]$ bin/oozied.sh start Setting OOZIE_HOME: /hom ...
    
			
    10. 
						
  10. Android Bitmap 常见的几个操作：缩放，裁剪，旋转，偏移
			
    Android Bitmap 相关操作 常见的几个操作:缩放,裁剪,旋转,偏移      很多操作需要 Matrix 来支持:Matrix 通过矩阵来处理位图,计算出各个像素点的位置,从而把bitma ...
    
			
    11.