<!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. jQuery--index()  window.onhashchange
			
    index(): 1. 如果没有参数传给该函数,那么就返回一个整数,为其相对于其兄弟节点的位置. 2. 如果在一个元素集合上调用该函数,并且传入的参数为一个DOM元素或jQuery对象,那么返回一个整 ...
    
			
    2. 
						
  2. Python12期培训班-day1-登陆验证代码分享
			
    #!/usr/bin/env python import sys import getpass afile = 'afile' bfile = 'bfile' circulation_num=0 #循 ...
    
			
    3. 
						
  3. 最短JS判断是否为IE6(IE的写法)
			
    常用的 JavaScript 检测浏览器为 IE 是哪个版本的代码,包括是否是最人极端厌恶的 ie6 识别与检测.代码如下: var isIE=!!window.ActiveXObject; var  ...
    
			
    4. 
						
  4. mysql给其他用户权限访问我的数据库
			
    先执行这条语句,给用户权限 grant all privileges on *.* to root@"221.221.185.23" identified by "gyr ...
    
			
    5. 
						
  5. codeforces195a
			
    link:http://codeforces.com/problemset/problem/336/A 很简单的一道题目,当初有个单词不认识,isosceles原来意思是等腰的o(╯□╰)o #inc ...
    
			
    6. 
						
  6. 《C与指针》第七章练习
			
    本章问题 1.具有空函数体的函数可以作为存根使用,你如何对这类函数进行修改,使其更有用? answer:Have the stub(存根) print out a message when it is ...
    
			
    7. 
						
  7. Qt之QComboBox（基本应用、代理设置）(转)
			
    QComboBox下拉列表比较常用,用户可以通过选择不同的选项来实现不同的操作,如何实现自己的下拉列表呢? 很多人在问QComboBox如何设置选项的高度.代理等一些问题!今天就在此分享一下自己的一些 ...
    
			
    8. 
						
  8. 有关使用seajs和template模板的总结
			
    方法一:使用<script type="text/javascript" src="../js/lib/template.js"></scri ...
    
			
    9. 
						
  9. Maven学习 (一) 搭建Maven环境
			
      有两种方式可以配置maven的环境配置,本人推荐使用第二种,即使用本地的maven安装文件,个人感觉这样可以方便管理下载jar包的存放位置,错误信息的输出等,可以在dos窗口中可以清晰看到,虽然比 ...
    
			
    10. 
						
  10. List<T>线性查找和二分查找BinarySearch效率分析
			
    今天因为要用到List的查找功能,所以写了一段测试代码,测试线性查找和二分查找的性能差距,以决定选择哪种查找方式. 线性查找:Contains,Find,IndexOf都是线性查找. 二分查找:Bin ...
    
			
    11.