web离线应用 Web SQL Database
web sql database 是html5废弃的一个新特性，它提供了基本的关系数据库功能，使用 `SQL` 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite
主要核心api有3个
- openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
Database openDatabase(in DOMString name,
in DOMString version,
in DOMString displayName,
in unsigned long estimatedSize,
in optional DatabaseCallback creationCallback);
name：数据库名。
version：数据库版本。
displayName：显示名称。
estimatedSize：数据库预估长度（以字节为单位）。
creationCallback：回调函数。（非必须)
2. transaction：这个方法允许我们根据情况控制事务提交或回滚
void transaction(in SQLTransactionCallback callback,
in optional SQLTransactionErrorCallback errorCallback,
in optional SQLVoidCallback successCallback);
callback：事务回调函数，其中可以执行 SQL 语句。
errorCallback：出错回调函数。（非必须)
successCallback：执行成功回调函数。（非必须)
3. executeSql：这个方法用于执行SQL 查询
void executeSql(in DOMString sqlStatement,
in optional ObjectArray arguments,
in optional SQLStatementCallback callback,
in optional SQLStatementErrorCallback errorCallback);
sqlStatement：SQL 语句。
arguments：SQL 语句需要的参数(?)数组。（非必须)
callback：回调函数。（非必须)
errorCallback：出错回调函数。（非必须)
完整栗子
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 web sql database应用</title>
</head>
<body>
<input type="button" value="创建表" onclick="createTable()"/>
<input type="button" value="存值" onclick="save()"/>
<input type="button" value="取值" onclick="queryData();" />
<input type="button" value="删除" onclick="del(1);" />
<table id="datatable" border="1">
<thead>
<tr>
<td>id</td>
<td>text</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script> var db = createDB(); function createDB(){
return openDatabase('textDB', '1.0', 'text DB', 2 * 1024);
} function createTable(){
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS textTable (id unique, text)');
});
} function insetData( id ){
db.transaction(function (tx) {
tx.executeSql('INSERT INTO textTable (id, text) VALUES ('+id+', "内容'+id+'")');
});
} function save(){
for(var i = 0 ; i < 10 ; i++){
insetData( i );
}
} function del(id){
db.transaction(function (tx) {
if(id){
tx.executeSql('DELETE FROM textTable WHERE id = ? ', [id]);
}else{
tx.executeSql('DELETE FROM textTable');
}
});
} function queryData(){
var tbody = document.getElementById('datatable').getElementsByTagName('tbody')[0];
empty(tbody, 'tr');
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM textTable',[],function (context, results){
// console.dir(results);
var rows = results.rows, len = rows.length, i, tr,id,text;
for(i = 0 ; i < len; i++){
// console.dir(rows.item(i));
id = document.createElement('td');
id.innerHTML = rows.item(i).id;
text = document.createElement('td');
text.innerHTML = rows.item(i).text; tr = document.createElement('tr');
tr.appendChild(id);
tr.appendChild(text); tbody.appendChild(tr);
}
// 释放内存
tr = null, id = null, text = null, tbody = null;
});
});
} function empty(parent, childrenName){
var childrendom = parent.getElementsByTagName(childrenName);
var o = childrendom[0];
while( o != null ){
console.log(o)
parent.removeChild(o);
o = childrendom[0];
}
}
</script>
</body>
</html>
使用chrome的同学可以按下F12 
chrome真的很强大把storage、cookies、app cache、web sql、index db等都列出来了
web离线应用 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,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- Web SQL Database实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)HTML5开发学习（3）:本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
随机推荐
- JavaScript正则表达式之分组匹配 / 反向引用
语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的 ...
- Java 7 JVM和垃圾收集
---恢复内容开始--- 写JAVA程序,一定要了解JVM(JAVA Virtual machine)一些基础知识和垃圾收集.如果对JVM已经很了解了,可以不用继续往下阅读了.本文只针对Java 7, ...
- Java 获取SQL查询语句结果
step1:构造连接Class.forName("com.mysql.jdbc.Driver"); Connection con = DriverManager.getConnec ...
- Codeforces Round #439 (Div. 2) C DP(图论）
C. The Intriguing Obsession time limit per test 1 second memory limit per test 256 megabytes input s ...
- SharePoint Server 2013 安装篇 - 如何解决无法找到 .net 4.5 的问题
SharePoint Server 2013 在安装前,是不能安装 VS 等会自动安装 .net 4.5.x 以上版本的 .net Framework 的软件的.因为安装了 .net Framewor ...
- css 行内元素设置宽高
有2中实现方法: 1.设置display:block inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...
- CSS fliter
Filters主要是运用在图片上,以实现一些特效.(也能运用于video上),类似滤镜效果 img { -webkit-filter:grayscale(1); } gr ...
- Problem F: 分数类的类型转换
Description 封装一个分数类Fract,用来处理分数功能和运算,支持以下操作: 1. 构造:传入两个参数n和m,表示n/m:分数在构造时立即转化成最简分数. 2. show()函数:分数 ...
- RobotFramework自动化测试框架-移动手机自动化测试Get Element Location关键字的使用
Get Element Location关键字用来获取一个Element的Location位置,该关键字接收一个参数[ locator ] 示例1:使用Get Element Location来获取一 ...
- 安装MongoDB启动时报错‘发生系统错误2’的解决办法
安装数据库mongodb启动时报"发生系统错误2". 这个问题是如果你之前已经装过一次,并且两次安装目录不同,就绝对会碰到的,因为你之前安装的路径已经在注册表中生成了,并没有随着你 ...