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:这个方法允许我们根据情况 ...
随机推荐
- Java String字符串补0或空格
package cn.com.songjy; import java.text.NumberFormat; //Java 中给数字左边补0 public class NumberFormatTest ...
- 网页版电子表格控件tmlxSpreadsheet免费下载地址
tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).. 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能 ...
- Using Interface Builder记录
1.interface builder的作用主要是用来设计视图,文件的拓展名诶.storyboard或者.xib :这两文件的区别是,.xib文件只能设计一个视图控制器,也就只能显示一个视图,.sto ...
- UE4 编译后 不能正常使用Open Level 打开关卡解决方案:Open Level Blueprint Node not workin
配置DefaultEditor.ini 文件 [AllMaps] +Map=/关卡文件路径 参考文献: https://answers.unrealengine.com/questions/141 ...
- PHP flush sleep 输出缓存控制详解
1 2 3 4 5 6 ob_start,flush,ob_flush for($i=0;$i<</SPAN>10;$i++) { echo $i.''; flush(); slee ...
- 开发经验之状态机思想,分别使用了swift,OC,C,PHP语言实现
这里设计一个简单的练习,使用状态机思想实现,分别使用了swift,OC,C,PHP语言实现 题目:1到10000遍历,开始-打印奇数-遇到7的倍数开始打印偶数--遇到10的倍数打印奇数 //部分结 ...
- listview分页加载
package com.baway.test; import java.util.ArrayList; import com.baidu.vo.Mydata;import com.baidu.vo.S ...
- JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...
- 02_java语法基础_课程动手动脑问题以及课后实验性问题及解答集锦
Answer: 动手动脑: 1:1.1--仔细阅读实例:EnumTest.java,运行它,分析运行结果? 1.2--你能得到什么结论?你掌握了枚举变量的基本用法了吗? answer:枚举类型是引用类 ...
- VISIBLE、INVISIBLE、GONE的区别
VISIBLE:设置控件可见 INVISIBLE:设置控件不可见 GONE:设置控件隐藏 而INVISIBLE和GONE的主要区别是:当控件visibility属性为INVISIBLE时,界面保留了v ...