<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body onload="init()">

 <table>

     <tr>

         <td>姓名：</td><td><input type="text" id="name"></td>

     </tr>

     <tr>

         <td>留言：</td><td><input type="text" id="memo"></td>

     </tr>

     <tr>

         <td></td>

         <td><input type="button" value="保存" onclick="saveInfo()"></td>

     </tr>

 </table>

 <hr>

 <table id="datatable" border="1">

 </table>

 <p id="msg"></p>

 <script>

     var datatable=null;

     //创建数据库

     var db=openDatabase("MyData","","My Batabase",1024*100);

     //初始化数据

     function init() {

         datatable=document.getElementById("datatable");

         showAllData();

     }

     //先移除所有数据并添加新的数据

     function  removeALLData() {

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

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

         datatable.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.toLocaleString();

         tr.appendChild(td1);

         tr.appendChild(td2);

         tr.appendChild(td3);

         datatable.appendChild(tr);

     }

     //从数据库查询并显示所有数据

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

          db.transaction(function (tx) {

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

                  alert("成功");

              },function (tx,error){

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

              });

          })

     }

     //保存数据

     function saveInfo() {

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

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

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

         addData(name,memo,time);

         showAllData();

     }

 </script>

 </body>

 </html>

为什么HTML5会放弃Web SQL Database?





Web SQL Database采用了sqlite做为后端，可以用js进等数据库操作，非常方便，可是刚刚发现，这个标准被放弃了：Web SQL Database
放弃的原因是：
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思是：
该文件是W3C推荐标准，但规范的制定工作已经停止。该规范陷入僵局：所有感兴趣的实现者都使用了相同的SQL后端（SQLite的），但我们需要多个独立的实现沿着规范化的路径进行。


我非常不能理解，sqlite有什么不好的，大家都认同，不就可以了么？为什么为这个放弃呢？
各大浏览器还会继续支持这个标准么？如果我现在在新项目中继续采用这个功能，会不会不久之后就会因为浏览器停止支持而失效？




 


												


											
Web SQL Database实例的更多相关文章
	

    
								
  1. HTML5教程之html 5 本地数据库（Web Sql Database）
		
    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
    
		
    2. 
						
  2. HTML5本地存储——Web SQL Database
		
    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
    
		
    3. 
						
  3. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
		
    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
    
		
    4. 
						
  4. web sql database数据存储位置
		
    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...
    
		
    5. 
						
  5. 阿伦学习html5 之Web SQL Database
		
    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...
    
		
    6. 
						
  6. 【HTML5】HTML5本地数据库（Web Sql Database）
		
    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
    
		
    7. 
						
  7. [转]HTML5本地存储——Web SQL Database
		
    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
    
		
    8. 
						
  8. (转)HTML5开发学习（3）:本地存储之Web Sql Database
		
    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
    
		
    9. 
						
  9. HTML5的Web SQL Database
		
    本文将介绍 Web SQL Database 规范中定义的三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 transaction:这个方法允许我们根据情况 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Bean property '**DAO' is not writable or has an invalid setter method
			
    ApplicationContext.xml中配置有问题,里面的bean的属性名称写错了. ApplicationContext.xml中写的是loginDAO,在java类里配置的bean却写成了l ...
    
			
    2. 
						
  2. LR接口测试手工脚本与验证脚本
			
    Action(){ char URL[250]; char mars_cid[30]; memset(URL,0,sizeof(URL)); memset(mars_cid,0,sizeof(mars ...
    
			
    3. 
						
  3. 苹果IPhone手机由于更新了IOS7 Beta测试版导致“激活出错”后，如何还原电话本和照片方法
			
    苹果这狗日的,手段果然狠,因为用户提前升级了测试版又没有更新正式版,就突然把手机变砖头,既不让升级正式版,也不让备份手机中的信息,确实有必要这样吗? 我的手机是IPone4s,在看了6月Apple W ...
    
			
    4. 
						
  4. ubuntu 14.04 LTS 安装ss客户端
			
    附: 配置pac模式 ss客户端 ss客户端 前提环境 python (用最新的就行) pip (注:python工具) build-essential 以上可以通过一条命令解决: sudo apt- ...
    
			
    5. 
						
  5. bigworld源码分析（2）—— loginApp分析
			
    loginApp是整个bigworld进行用户认证的服务,是用户进入游戏的第一步.本篇主要针对loginApp的认证流程,如何和其他服务进行交互,以及loginApp针对多服务负载的不同做法进行分析. ...
    
			
    6. 
						
  6. C 内存管理初步了解
			
    1 首先变量了解几个概念 静态变量:用 static 修饰的变量 局部变量: 存储在栈区:作用域是函数块内:生存期是直到函数块结束 全局变量:存储在静态区:作用域是从定义到本源程序结束,生存期是运行期 ...
    
			
    7. 
						
  7. mysql 导出慢
			
    转: 导出 mysqldump -uroot -p discuz  -e --max_allowed_packet=1048576 --net_buffer_length=16384 > dis ...
    
			
    8. 
						
  8. LeetCode() Word Search II
			
    超时,用了tire也不行,需要再改. class Solution { class TrieNode { public: // Initialize your data structure here. ...
    
			
    9. 
						
  9. Android——手机内部文件存储（作业）
			
    作业:把用户的注册信息存储到文件里,登录成功后读出并显示出来 activity_practice2的layout文件: <?xml version="1.0" encodin ...
    
			
    10. 
						
  10. Highcharts中文参考手册
			
    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
    
			
    11.