<!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. 关于QGraphicsScene 和 QGraphicsView 和 QDialog 的杂乱笔记【或说指针复习。。】
			
    LtCalibrateDlg::~LtCalibrateDlg() { if (m_pIplImageGray) cvReleaseImage(&m_pIplImageGray); MYDEL ...
    
			
    2. 
						
  2. php 无法连接mysql
			
    sql_connect,sqli_connect, 或new sqli() 无法建立mysql连接 1. php.ini 中 ; extension=php_mysql.dll 和 ; extensi ...
    
			
    3. 
						
  3. UIMenuController的使用，对UILabel拷贝以及定制菜单
			
    分类: ios开发2012-08-06 17:15 11961人阅读 评论(0) 收藏 举报 actionmenuuiview 1. Menu所处的View必须实现 – (BOOL)canBecome ...
    
			
    4. 
						
  4. mac下XAMPP服务器配置多站点配置局域网配置  （转）
			
    原文:http://blog.csdn.net/wbw1985/article/details/9493989 Mac 上的软件大多是收费的,配置开源的东东也挺麻烦,网上搜索发现XAMPP软件是集成了 ...
    
			
    5. 
						
  5. linux下实时监测tomcat关闭并启动
			
    linux下tomcat总是会无故出现自动关闭的情况,在暂时无法解决该问题时,就需要一个东西能实时监测tomcat是否还正常的运行,若发现已关闭时,执行启动命令. 我们可以添加一个shell脚本来实现 ...
    
			
    6. 
						
  6. Glossary
			
    Glossary term terminology Certificate authority A norganization that authorizes a certificate. Certi ...
    
			
    7. 
						
  7. ;function($,undefined) 前面的分号是什么用处
			
    ;function($,undefined) 前面的分号是什么用处 ;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号,在前面加分号可以有多种用途:1 ...
    
			
    8. 
						
  8. Word 2013发布博客配置步骤
			
    .打开Word 2013,点击"共享"››"博客":   .在打开的窗口中点击"管理帐户":   .然后点击"新建":  ...
    
			
    9. 
						
  9. HDFS介绍
			
    一.HDFS概述 1.HDFS设计思想来源于Google的GFS,是GFS的开源实现. 2.HDFS要解决的问题: -存储超大文件,比如TB级别 -防止文件丢失. 3.HDFS的特点 -可以存储超大文 ...
    
			
    10. 
						
  10. Spring源码学习之：@async  方法上添加该注解实现异步调用的原理
			
    在我们使用spring框架的过程中,在很多时候我们会使用@async注解来异步执行某一些方法,提高系统的执行效率.今天我们来探讨下 spring 是如何完成这个功能的.    spring 在扫描be ...
    
			
    11.