Web SQL Database实例
<!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?
放弃的原因是:
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实例的更多相关文章
- HTML5教程之html 5 本地数据库(Web Sql Database)
HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- web sql database数据存储位置
Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...
- 阿伦学习html5 之Web SQL Database
不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...
- 【HTML5】HTML5本地数据库(Web Sql Database)
Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- (转)HTML5开发学习(3):本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- HTML5的Web SQL Database
本文将介绍 Web SQL Database 规范中定义的三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 transaction:这个方法允许我们根据情况 ...
随机推荐
- IIS 工作原理之非托管代码旅程(一)
IIS6改变 IIS6可以为每个不同的虚拟目录创建不同的程序池,这样缩小了IIS的Application Pool的颗粒度,不同的虚拟目录之间是互不影响的. IIS6(和IIS7经典模式)与IIS7集 ...
- UIkit框架之UITabBarController
1.继承链:UIviewController:uiresponder:NSObject 2.访问tab bar控制器的属性 (1)@property(nonatomic, weak) id< U ...
- angularjs中展示富文本编辑器文本,向DOM中插入元素
前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操 ...
- SQL 变量
1.变量可以暂时储存数据 --定义变量: declare @xxx int --变量赋值: set @xxx=1 select @xxx=3 --变量的使用: print @xxx 2.--全 ...
- TCP/IP 协议:IP 协议
首先来看一下IP协议在实际中的位置: 我们只关系流程,不关系当前具体的服务类型 1.IP协议概述 作用: 从上图或从应用层->运输层->网络层->链路层来看,IP协议属于网络层,也就 ...
- VHDL:信号、端口以及和Verilog的区别
1.信号 信号是描述硬件系统的基本数据对象,它的性质类似于连接线.信号可以作为设计实 体中并行语句模块间的信息交流通道. 信号作为一种数值容器,不但可以容纳当前值,也可以保持历史值(这决定于 ...
- Objective-c——UI基础开发第十二天(相册展示)
一.知识点 模仿新特性 UICollectionViewFlowLayout自定义布局 相册 瀑布流(淘宝购物之类的 二.复习 a.UICollectionView 和 tableview共享一套AP ...
- gdb使用心得
启用调试gdb gdb 路径到prog_1dray 然后就直接进去gdb了 进去后输入r *.par 参数文件就行了 暂时学到这,用到这!日后再学习更新
- 列表框QListWidget类
QListWidget类也是GUI中常用的类,它从QListView下派生: class Q_GUI_EXPORT QListWidget : public QListView { Q_OBJECT ...
- c++ poco库https调用
#include "Poco\File.h"#include "Poco\FileStream.h"#include "Poco\Process.h& ...