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. 从 JavaScript 到 TypeScript
			
    本文首发在我的个人博客:http://muyunyun.cn/posts/66a54fc2/ 文中的案例代码已经上传到 TypeScript TypeScript 并不是一个完全新的语言, 它是 Ja ...
    
			
    2. 
						
  2. Windows PowerShell 默认颜色
			
    屏幕背景:1,36,86 屏幕文字:238,237,240 弹出文字:0,128,128 弹出窗口背景:255,255,255
    
			
    3. 
						
  3. 随记之 -- diy相册
			
    最近一段时间楼下在整修房子,一到早晨6点多的时候,电钻声.敲打声齐鸣,实在是不能好好的睡个安稳觉 (┳＿┳)... 这周六像往常一样,以为又要被惊醒了,所以早早的就醒了,谁知竟然出奇的安静,难道施工队 ...
    
			
    4. 
						
  4. MyBatis源码解析【6】SqlSession运行
			
    前言 这个分类比较连续,如果这里看不懂,或者第一次看,请回顾之前的博客 http://www.cnblogs.com/linkstar/category/1027239.html 经过之前的学习我们知 ...
    
			
    5. 
						
  5. crm维护踩坑记(一)
			
    目录 antd es6 Object.entries() Object.keys() Object.getOwnPropertyNames() 很神奇的用法!!! eslint 傻逼 其他 参考 an ...
    
			
    6. 
						
  6. 简单介绍Struts2
			
    Struts2概述 Struts2虽然是Struts1的基础上发展起来的,但是实质上是以WebWork框架为核心,为传统的Struts1注入了WebWork的设计理念,统一了Struts1和WebWo ...
    
			
    7. 
						
  7. shell脚本中字符串的常见操作及"command not found"报错处理(附源码)
			
    简介 昨天在通过shell脚本实现一个功能的时候,由于对shell处理字符串的方法有些不熟悉导致花了不少时间也犯了很多错误,因此将昨日的一些错误记录下来,避免以后再犯. 字符串的定义与赋值 # 定义S ...
    
			
    8. 
						
  8. Linux服务器学习（一）
			
    一.首先连接服务器 下载一个windows下连接linux的ssh工具,我这里用的putty.一次填入HostName(主机名,可以是服务器域名也可以是对应的ip).Port(端口号默认为22).Co ...
    
			
    9. 
						
  9. 函数响应式编程及ReactiveObjC学习笔记 (二)
			
    之前我们初步认识了RAC的设计思路跟实现方式, 现在我们再来看看如果使用它以及它能帮我们做什么 One of the major advantages of RAC is that it provid ...
    
			
    10. 
						
  10. zoj 3963 heap partion
			
    https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...
    
			
    11.