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. 使用Hexo+Github一步步搭建属于自己的博客（进阶）

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  2. 基于Python实现matplotlib中动态更新图片(交互式绘图)

    最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...

  3. Archlinux 安装小计

    前阵子Fedora太不稳定,几乎不能正常使用了,同时也对版本形式的linux每次升级后各种扫尾和清扫工作感到有点厌倦,心里也非常想体验一下linux的滚动发行版,所以下定决心要干掉fedora,主流的 ...

  4. IOC杂谈（一）初识IOC

    初衷 发现学习东西不单只是看,用,还有很重要一点就是记录,不然过个几个月再用到相同的知识时,你会发现你已经丢得差不多了,故此开始在博客园记录的同时也与各位同行分享知识. 正题 关于IOC,在刚工作时就 ...

  5. 树莓派.使用Node.js来制作一个作业检查仪

    先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...

  6. IP核之初——FIFO添加以太网MAC头部

    本文设计思路源自明德扬至简设计法.在之前的几篇博文中,由于设计比较简单,所有的功能都是用verilogHDL代码编写实现的.我们要学会站在巨人的肩膀上,这时候就该IP核登场了! 说白了,IP核就是别人 ...

  7. LeetCode 624. Maximum Distance in Arrays （在数组中的最大距离）$

    Given m arrays, and each array is sorted in ascending order. Now you can pick up two integers from t ...

  8. servlet的运行工作

    我是一个刚学几天的小白,写得不好,如果哪个地方有错误,欢迎你们指出. 在服务器端,我用的是Tomcat作为Servlet 容器,在容器中有一个Servlet接口,你编写一个servlet类放在Tomc ...

  9. 2015ACM/ICPC亚洲区沈阳站 Pagodas

    Pagodas Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  10. layui数据表格以及传数据方式

    数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockqu ...