Web sql 这是一个模拟数据库浏览器。可以使用JS操作SQL完成数据读取和写入,但是这件事情并不多,现在支持的浏览器,而其W3C规格已经停止支持。外形似它的前景不是很亮。

W3C 规范:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-sync-executesql (眼下已经停止更新,组织也没想清楚发展方向)

支持的浏览器以及版本号:

Safari (3.2+)

Chrome (3.0+)

Opera (10.5+)

通经常规的离线应用使用的是webstorage,可是webstorage带有非常大的局限性,比方存储空间。domain安全机制等。而WEB SQL 就没有那么多的限制。其有更大的存储空间(可自己定义设置),跨域读写,存储结构自由等特点。并且能够方便的使用SQL来进行读写,非常的方便。

演示样例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用数据库实现web留言板</title>
<script language="JavaScript">
var datatable = null;
//使用openDatabase方法来创建一个訪问数据库的对象
var db = openDatabase('MyData', '', 'My Database', 102400); // 初始化操作
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.toLocaleTimeString();
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, rs) {
//document.getElementById("msg").innerHTML = "成功保存数据!";
},
function(tx, error) {
alert(error.source + "::" + error.message);
});
});
} // 保存数据
function saveData() {
var name = document.getElementById('name').value;
var memo = document.getElementById('memo').value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();
} // 删除表中数据
function deleteData(){
db.transaction(function(tx){
tx.executeSql("DELETE FROM MsgData",[],function(tx, rs) {
//alert("数据删除成功!");
},
function(tx, error) {
alert(error.source + "::" + error.message);
});
});
showAllData();
}
</script>
</head>
<body onload="init()">
<h1>使用数据库实现web留言板</h1>
<table>
<tr>
<td><label>姓名:</label></td>
<td><input type="text" id="name" /> </td>
</tr>
<tr>
<td><label>留言:</label></td>
<td><input type="text" id="memo" /> </td>
</tr>
<tr>
<td ><input type="button" value="保存" onclick="saveData();"/> </td>
<td ><input type="button" value="删除" onclick="deleteData();"/> </td>
</tr>
<tr>
<td colspan="2">
<p id="msg"></p>
</td>
</tr>
</table>
<hr />
<table id="datatable" border="1">
</table>
</body>
</html>

对于websql。因为宽泛的读写规则,其带来的就是非常大的安全问题,跨域读取,XSS攻击,SQL注入等都是非常头疼的事情。所以什么样的数据能够存储,怎样存储。须要谨慎考虑。W3C眼下停止了该规范的更新,可能对眼下的规范设计并不惬意,而眼下浏览器厂商的支持度也不高,兴许的发展。还是未知。

版权声明:本文博客原创文章。博客,未经同意,不得转载。

HTML 5 在Web SQL 使用演示样本的更多相关文章

  1. java注意事项演示 地图产生表 演示样本 来自thinking in java 4 20代码的章

    java注意事项演示 地图产生表 演示样本  来自thinking in java 4 20代码的章 thinking in java 4免费下载:http://download.csdn.net/d ...

  2. HTML5 Web SQL 数据库

    呼和浩特seo:Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该 ...

  3. HTML5: HTML5 Web SQL 数据库

    ylbtech-HTML5: HTML5 Web SQL 数据库 1.返回顶部 1. HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个 ...

  4. HTML5教程之html 5 本地数据库(Web Sql Database)

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  5. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

  8. 阿伦学习html5 之Web SQL Database

    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...

  9. localStorage, localforage, web sql三者的比较

    最近的项目中用到了前端存储,最初选用的是localStorage,这个是html5里面新增的API,用法很简单.setItem getItem clear. 值得注意的是,localStorage中存 ...

随机推荐

  1. 这个夏天不AC(杭州电2037)

    这个夏天不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  2. Bubbles Shader in Houdini泡泡泡泡泡泡泡泡泡泡

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3Vja29u/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  3. axure & Markman

    axure & Markman学习总结 最近学了几款有意思的软件,一款是axure,另一款是Markman.接下来聊聊自己的学习心得吧. 关于axure,百度上的解释是:是一个专业的快速原型设 ...

  4. NSIS:设置文件属性的方法

    原文 NSIS:设置文件属性的方法 在NSIS中,有以下方法可以对文件的属性进行设置.   一是通过NSIS的指令SetFileAttributes.   多重属性可用 ' | ' 隔开,有效的属性为 ...

  5. JavaEE(15) - JPA实体继承

    1. 实体继承映射的三种策略 #1. 整个类层次对应一张表 #2. 连接子类 #3. 每个具体类对应一张表 2. 使用抽象实体 3. 使用非实体父类 4. 重定义子类实体的外键列 ---------- ...

  6. FZU 2082 过路费(树链剖分)

    FZU 2082 过路费 题目链接 树链抛分改动边的模板题 代码: #include <cstdio> #include <cstring> #include <vect ...

  7. Unity模拟龙之谷人物行走简单控制

    我个人挺喜欢龙之谷(DN)的人物控制的(不是广告哈....),就是人物太萌了一点,动作.打击感都挺好的. 今天用Unity简单模仿了一下DN的人物控制,当然,游戏里面动作非常多,我这里仅仅做了简单的w ...

  8. mysql导出和导入命令更改数据库名称数据库

    概要 mysql 数据库导入和导出,有两种方法 1)从试点SQL脚本.导入(导入导出又分两种:1. 命令. 2. 工具.这里我们仅仅介绍命令). 2)直接拷贝数据库文件(此方法不推荐). 一.mysq ...

  9. C++ Web Programming

    一般的网关接口或者CGI,就是一个标准的集合.它定义信息怎样再问吧server和一般脚本间的交换. CGI的说明书是由NCSA维护,NCSA定义CGI的范畴:一般的网关接口或者CGI是外部网关程序的一 ...

  10. 霍夫曼(最优二叉树)和Java达到

    一.定义 一些定义: 节点之间的路径长度:在从节点树中的一个节点也经历分公司,这构成的两个节点之间的路径分支的数目后这就是所谓的路径长度 的路径长度:从树的根节点到树中每一结点的路径长度之和. 在结点 ...