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. Partitioner分区过程分析

    Partition中国人意味着分区,意义的碎片,这个阶段也是整个MapReduce该过程的第三阶段.在Map返回任务,是使key分到通过一定的分区算法.分到固定的区域中.给不同的Reduce做处理,达 ...

  2. ANDROID嵌入式应用Unity3D视图(画廊3D模型)

    转载请注明来自大型玉米的博客文章(http://blog.csdn.net/a396901990),谢谢支持! 效果展示:   watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  3. hdu 2067 兔子板

    兔子板 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  4. BZOJ 2115 Wc2011 Xor DFS+高斯消元

    标题效果:鉴于无向图.右侧的每个边缘,求一个1至n路径,右上路径值XOR和最大 首先,一个XOR并能为一个路径1至n简单的路径和一些简单的XOR和环 我们开始DFS获得随机的1至n简单的路径和绘图环所 ...

  5. SGU 548 Dragons and Princesses

    意甲冠军: n个月格儿  所有的格龙或公主的儿子  从勇士1走n  不杀  杀死有钱拿  路过公主  假设之前杀龙的数量满足公主要求就会停止行走  问  勇士想多拿钱  可是必需要满足n格子的公主  ...

  6. (大数据工程师学习路径)第三步 Git Community Book----Git基本用法(上)

    一.git的初始化 1.Git 配置 使用Git的第一件事就是设置你的名字和email,这些就是你在提交commit时的签名. $ git config --global user.name &quo ...

  7. 使用Xcode和Instruments调试解决iOS内存泄漏

    尽管iOS 5.0加入版本号之后ARC机制,由于相互引用关系是复杂的.内存泄漏可能仍然存在.于是,懂原理是非常重要的. 这里讲述在没有ARC的情况下,怎样使用Instruments来查找程序中的内存泄 ...

  8. OCP读书笔记(21) - 题库(ExamA)

    Administer ASM disk groupsBack up the recovery catalogConfigure backup settingsConfigure, Monitor Fl ...

  9. java两个音频进入巩固期 玩的同时类似的伴奏

    /** * * @param partsPaths 阵列要合成音频路径 * @param unitedFilePath 输入合并结果数组 */ public void uniteWavFile(Str ...

  10. Oracle 树操作

    Oracle 树操作(select…start with…connect by…prior) oracle树查询的最重要的就是select…start with…connect by…prior语法了 ...