web sql database 是html5废弃的一个新特性，它提供了基本的关系数据库功能，使用 `SQL` 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite

主要核心api有3个

  1. 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的更多相关文章

  1. HTML5教程之html 5 本地数据库（Web Sql Database）

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

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

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

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

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

  4. web sql database数据存储位置

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

  5. 阿伦学习html5 之Web SQL Database

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

  6. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  7. [转]HTML5本地存储——Web SQL Database

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

  8. Web SQL Database实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. (转)HTML5开发学习（3）:本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

随机推荐

  1. 实现一个单隐层神经网络python

    看过首席科学家NG的深度学习公开课很久了,一直没有时间做课后编程题,做完想把思路总结下来,仅仅记录编程主线. 一 引用工具包 import numpy as np import matplotlib. ...

  2. 打包zip下载

    //首先引入的文件为org.apache的切记不是jdk的import org.apache.tools.zip.ZipOutputStream;import org.apache.tools.zip ...

  3. 网络地址转换NAT

    1. 网络地址转换:用于专用网内部的主机和因特网上的主机通信.在专用网连接到因特网 的路由器上需要安装NAT软件,装有NAT软件的路由器叫做NAT路由器,它至少要有 一个有效的全球IP地址.所有使用本 ...

  4. 对于Swift的Enum,文档上没有说的

    今天无意发现一个东西, 但是在文档上看了很多遍都没找到, 但是亲测是可行的, 那到底是什么呢? 以前我们定义枚举 会这样: enum Hello { case Item( String, Int) c ...

  5. 菱形开合的实现 IOS

    实现的原理: 利用了自动布局和形变 核心代码块: @implementation JHMainView { UILabel *label1,*label2,*label3,*label4; UIBut ...

  6. JS框架设计读书笔记之-小知识

    这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识 ...

  7. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  8. c语言的，三个工具可以使编译器生成性能更佳的代码。

    内联函数声明inline 函数有时可以非常短.短函数的每次调用可以用实现该函数功能的内联代码替代,以提高执行性能.意味着不需要给函数传递或返回一个值,要让编译器采用这种技术,可以把短函数指定为inli ...

  9. R-kmeans聚类算法

    K-means也是聚类算法中最简单的一种了,但是里面包含的思想却是不一般.最早我使用并实现这个算法是在学习韩爷爷那本数据挖掘的书中,那本书比较注重应用.看了Andrew Ng的这个讲义后才有些明白K- ...

  10. 用js判断是否为手机浏览，如果是手机浏览就跳转到手机站

    <script type="text/javascript"> function browserRedirect() { var sUserAgent= navigat ...