<!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. rails常用验证方法 （转）
			
    validates_presence_of       :login,  :message => "用户名不能为空!" validates_length_of         ...
    
			
    2. 
						
  2. javascript之小积累-.-typeof与instanceof的区别
			
    1.typeof 是获取一个变量或表达式的类型,返回的值通常是string, number, boolean, object(null, 数组, 对象), function, undefined,可以 ...
    
			
    3. 
						
  3. ecshop 常见问题汇总
			
    下面68ECSHOP开发中心就和大家说说ecshop使用中常见的问题 1.如何修改网站"欢迎光临本店"       回答(1) languages\zh_cn\common.php ...
    
			
    4. 
						
  4. Windows 下字节转换
			
    Windows 下字节转换 #include <string> #include <windows.h> class CharsConversion { public: sta ...
    
			
    5. 
						
  5. maven 基本常识以及命令
			
    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1. 创建Maven的普通 ...
    
			
    6. 
						
  6. 在 Mac OS X Yosemite 10.10.5 上配置 OpenGL 编程环境
			
    这个教程主要参考了youtube上的视频 Getting Started in OpenGL with GLFW/GLEW in Xcode 6 ,这个视频有点问题,不能照搬.本人通过自己摸(瞎)索( ...
    
			
    7. 
						
  7. apktool反编译apk文件
			
    1.首先下载apktool文件,可以从我的网盘下载:http://pan.baidu.com/s/1nvPdbVb 2.将你的apk文件和apktool文件放到一个文件夹下,这里就放到D:\study ...
    
			
    8. 
						
  8. Reveal UI 分析工具分析手机 App
			
    上篇文章介绍了: Reveal UI 分析工具简单使用 这里介绍如何使用 Reveal UI 分析工具来进行手机 App UI 界面的分析. 前提准备: (1)已安装 Reveal 的 Mac (2) ...
    
			
    9. 
						
  9. bk.
			
    http://ol.tgbus.com/zt2013/gzsnew/ 巴士盘点 十大游戏工作室 http://bbs.3dmgame.com/forum.php?mod=viewthread& ...
    
			
    10. 
						
  10. kibana ,logstash and filebeat
			
    https://www.elastic.co/guide/en/kibana/current/install.html https://www.elastic.co/guide/en/logstash ...
    
			
    11.