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

主要核心api有3个

  1. openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
  1. Database openDatabase(in DOMString name, 
      in DOMString version,
  2.   in DOMString displayName,
      in unsigned long estimatedSize,
  3.   in optional DatabaseCallback creationCallback);

　　name：数据库名。
　　version：数据库版本。
　　displayName：显示名称。
　　estimatedSize：数据库预估长度（以字节为单位）。
　　creationCallback：回调函数。（非必须)

　　2. transaction：这个方法允许我们根据情况控制事务提交或回滚

  1.  void transaction(in SQLTransactionCallback callback,
  2.     in optional SQLTransactionErrorCallback errorCallback,
  3.     in optional SQLVoidCallback successCallback);

　　callback：事务回调函数，其中可以执行 SQL 语句。
　　errorCallback：出错回调函数。（非必须)
　　successCallback：执行成功回调函数。（非必须)

     3. executeSql：这个方法用于执行SQL 查询

  1. void executeSql(in DOMString sqlStatement,
  2.     in optional ObjectArray arguments,
  3.     in optional SQLStatementCallback callback,
  4.     in optional SQLStatementErrorCallback errorCallback);

　　sqlStatement：SQL 语句。
　　arguments：SQL 语句需要的参数(?)数组。（非必须)
　　callback：回调函数。（非必须)
　　errorCallback：出错回调函数。（非必须)

完整栗子

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>html5 web sql database应用</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="创建表" onclick="createTable()"/>
  9.     <input type="button" value="存值" onclick="save()"/>
  10.     <input type="button" value="取值" onclick="queryData();" />
  11.     <input type="button" value="删除" onclick="del(1);" />
  12.     <table id="datatable" border="1">
  13.         <thead>
  14.             <tr>
  15.                 <td>id</td>
  16.                 <td>text</td>
  17.             </tr>
  18.         </thead>
  19.         <tbody></tbody>
  20.     </table>
  21.     <script>
  22.  
  23.         var db = createDB();
  24.  
  25.         function createDB(){
  26.             return openDatabase('textDB', '1.0', 'text DB', 2 * 1024);
  27.         }
  28.  
  29.         function createTable(){
  30.             db.transaction(function(tx){
  31.                 tx.executeSql('CREATE TABLE IF NOT EXISTS textTable (id unique, text)');
  32.             });
  33.         }
  34.  
  35.         function insetData( id ){
  36.             db.transaction(function (tx) {
  37.                 tx.executeSql('INSERT INTO textTable (id, text) VALUES ('+id+', "内容'+id+'")');
  38.             });
  39.         }
  40.  
  41.         function save(){
  42.             for(var i = 0 ; i < 10 ; i++){
  43.                 insetData( i );
  44.             }
  45.         }
  46.  
  47.         function del(id){
  48.             db.transaction(function (tx) {
  49.                 if(id){
  50.                     tx.executeSql('DELETE FROM textTable WHERE id = ? ', [id]);
  51.                 }else{
  52.                     tx.executeSql('DELETE FROM textTable');
  53.                 }
  54.             });
  55.         }
  56.  
  57.         function queryData(){
  58.             var tbody = document.getElementById('datatable').getElementsByTagName('tbody')[0];
  59.             empty(tbody, 'tr');
  60.             db.transaction(function (tx) {
  61.                 tx.executeSql('SELECT * FROM textTable',[],function (context, results){
  62.                     // console.dir(results);
  63.                     var rows = results.rows, len = rows.length, i, tr,id,text;
  64.                     for(i = 0 ; i < len; i++){
  65.                         // console.dir(rows.item(i));
  66.                         id = document.createElement('td');
  67.                         id.innerHTML = rows.item(i).id;
  68.                         text = document.createElement('td');
  69.                         text.innerHTML = rows.item(i).text;
  70.  
  71.                         tr = document.createElement('tr');
  72.                         tr.appendChild(id);
  73.                         tr.appendChild(text);
  74.  
  75.                         tbody.appendChild(tr);
  76.                     }
  77.                     // 释放内存
  78.                     tr = null, id = null, text = null, tbody = null;
  79.                 });
  80.             });
  81.         }
  82.  
  83.         function empty(parent, childrenName){
  84.             var childrendom = parent.getElementsByTagName(childrenName);
  85.             var o = childrendom[0];
  86.             while( o != null ){
  87.                 console.log(o)
  88.                 parent.removeChild(o);
  89.                 o = childrendom[0];
  90.             }
  91.         }
  92.     </script>
  93. </body>
  94. </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. [置顶] win10 uwp 参考

    态度随意申请专栏,没想到通过 看了我的博客,都是在别的大神博客看到,然后修改他们的 我看到的大神博客 东邪独孤 http://www.cnblogs.com/tcjiaan/ 老周,买了他的<W ...

  2. 关于scanf 与 cin gets()，getline（）......输入输出字符串的区别

    很对人对于字符串的输入输出一直是比较模糊的,今天总结一下几个常用的输入流符号对于输入字符串时的区别: 1.scanf(),首先 它遇到空格或回车键(\n)就会结束,并且会将回车符算入字符串中: 2.c ...

  3. Ubuntu安装Flash视频插件

    http://www.linuxidc.com/Linux/2014-05/101095.htm

  4. 博客收藏--sailing的博客

    http://blog.sina.com.cn/sailingxr free:这个博客主页的内容不错 PC的足迹 arm与x86 浅谈PCIe体系架构 浅谈cache memory

  5. 白夜追凶 ：手 Q 图片的显示和发送逻辑

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:陈舜尧 导语: "这张图片在快捷发图栏背景是黑色的,为啥发到AIO(会话窗口)里背景就变成白的了?" 通过一个bug ...

  6. LeetCode 575. Distribute Candies （发糖果）

    Given an integer array with even length, where different numbers in this array represent different k ...

  7. java swing中Timer类的学习

    最近在完成学校课程的java平时作业,要实现一个计时器,包含开始.暂停以及重置三个功能.由于老师规定要用这个timer类,也就去学习了一下,顺便记录一下. 首先呢去查了一下java手册上的东西,发现t ...

  8. 4天精通arcgis

    真是掉进了一个史无前例的坑 --ArcGIS产品线为用户提供一个可伸缩的,全面的GIS平台. 这是百科的介绍,简单来讲,这就是一个地图,可以搞事情. 学的是ArcGIS API for JavaScr ...

  9. hadoop2的mapreduce操作hbase数据

    1.从hbase中取数据,再把计算结果插入hbase中 package com.yeliang; import java.io.IOException; import org.apache.hadoo ...

  10. pyinstaller生成exe文件失败

    我的python是3.6,目前pyinstaller并不支持,有网友建议在Github上下载源码,用pyinstaller_develop文件夹替换pyinstaller安装位置下同名文件夹.这样做之 ...