Web Sql数据库简介

Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。

Web SQL数据库的浏览器支持情况

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

Web SQL创建的数据库在哪儿

这要依据你使用的浏览器的数据存储位置,默认是在安装目录的User Data文件夹。


html5创建的是一个sqllite数据库,用SQLiteSpy打开文件,可以看到里面的数据。SQLiteSpy是一个绿色软件,可以百度一下下载地址或SQLiteSpy官方下载。


打开数据库

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明:

1. 数据库名称

2. 版本号

3. 描述文件

4. 数据库大小

5. 创建回调,该参数会再创建数据库后被调用

创建表

tx.executeSql('CREATE TABLE LOGS (id unique, log)');

注:
1.创建表的命令不能单独使用,必须要和插入数据或是查询数据搭配使用,否则会报错。
2.有些地方写的格式是类似这样的

dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){ alert('创建stu表失败:' + error.message);
});
});

不过自己试了试,发现function(tx,result){}和function(tx,error) {}除了前者在查询语句中起了作用,其余的语句都没有任何作用。

插入数据

         var pid = 2;
         var id = 3;
         var plog = "www.success.com";
         var log = "www.jame.com";
         db.transaction(function (tx) {
            //创建表
            tx.executeSql('DROP TABLE IF EXISTS LOGS');
            tx.executeSql('CREATE TABLE LOGS (id unique, log)');
            //静态插入数据
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "www.honor.com")');
            //动态插入数据
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)',[pid,plog]);
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)',[id,log]);
         });

注:
1.处理数据的格式都有两种,分别为静态的和动态的。
2.在使用动态方法的时候需要注意语法

删除数据

         var did = 1;
         db.transaction(function (tx) {
              tx.executeSql('DELETE FROM LOGS  WHERE id='+did);
         });

db.transaction(function (tx)){tx.executeSql('DELETE FROM LOGS WHERE id = 1');

更新数据

         var uid = 2;
         db.transaction(function (tx) {
             tx.executeSql('UPDATE LOGS SET log=\'www.successful.cc\' WHERE id='+uid);
         });

         db.transaction(function (tx) {tx.executeSql('UPDATE LOGS SET log=\'www.successful.cc\' WHERE id=2');});

查询数据

查询语句结构:

db.transaction(function (tx) {
            tx.executeSql('inquire statement',
             [],
             function (tx, results) {
             //put your code
             }
             },
             null);
         });

查询所有信息:

        var msg;
         db.transaction(function (tx) {
            //查询所有信息
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var i;
               var len;
               //获得记录总数
               len  = results.rows.length;
               msg = "<p>查询记录条数: " + len + "</p>";
               //获得id为"status"的第一个标签
               document.querySelector('#status').innerHTML +=  msg;

               //获得每一个记录
               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

注:

1.document.querySelector(‘#status’)

    该函数将获得id值为status的第一个标签。
2.id为status的标签如下:

<div id="status" name="status"></div>

参考文章

HTML5 Web SQL

HTML5教程之html 5 本地数据库(Web Sql Database)

【HTML5】HTML5本地数据库(Web Sql Database)的更多相关文章

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

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

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

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

  3. HTML5开发学习:本地存储Web Sql Database

       Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库.    在HTML5中,大大丰富了客户端本地可以存储的内容 ...

  4. HTML5本地存储——Web SQL Database与indexedDB

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

  5. HTML5教程之html 5 本地数据库(Web Sql Database)

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

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

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

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

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

  8. html 5 本地数据库(Web Sql Database)核心方法openDatabase、transaction、executeSql 详解

    Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...

  9. HTML5客户端数据存储机制Web Storage和Web SQL Database

    引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...

随机推荐

  1. Android开发之广播

    广播是Android开发中的一个重要的功能,在Android里面有各式各样的广播,比如:电池的状态变化.信号的强弱状态.电话的接听和短信的接收等等,现在给大家简单介绍一下系统发送.监听这些广播的机制. ...

  2. poj 3101Astronomy(圆周追击+分数最小公倍数)

    /* 本题属于圆周追击问题: 假设已知两个圆周运动的物体的周期分别是a ,b, 设每隔时间t就会在同一条直线上 在同一条直线上的条件是 角度之差为 PI ! 那么就有方程 (2PI/a - 2PI/b ...

  3. 有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事!

    一.单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单.双引号: 先说几个PHP函数: 1.addslashes — 使用反斜线引用(转义)字符串: 返回字 ...

  4. Spark入门实战系列--6.SparkSQL(下)--Spark实战应用

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .运行环境说明 1.1 硬软件环境 线程,主频2.2G,10G内存 l  虚拟软件:VMwa ...

  5. 搭建PHP开发环境

    通过两种方式搭建PHP开发环境,而这种开发环境实际是:Apache+MySQL+PHP.  第一种: 通过套件来安装和配置php开发环境. Apache+MySQL+PHP开发环境的搭建(一) 第二种 ...

  6. 使用NuGet管理项目类库引用

    NuGet 是微软开发平台(包括.NET平台)的一个包管理器,这里只介绍和.NET相关的NuGet Visual Studio扩展客户端, 在VS2010 ,VS2012 ,VS2013中默认集成了N ...

  7. Apache Kylin 部署之不完全指南

    1. 引言 Apache Kylin(麒麟)是由eBay开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据.底层存储用的是HBase,数据输入与cu ...

  8. SQL Server中的事务日志管理(8/9):优化日志吞吐量

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...

  9. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要三

    最近工作较忙,手上有几个项目等着我独立开发设计,所以平时工作日的时候没有太多时间,下班累了就不想动,也就周末有点时间,今天我花了一个下午的时间来继续总结与整理书中要点,在整理的过程中,发现了书中的一些 ...

  10. 用Visual Studio Code 开发应用之 安装 Visual Studio Code

    最近研究微软的ASP.NET 新一代产品 ASP.NET Core1.0. 发先Visual Studio Code是一个很好的很强大的开源编辑器.是编辑器而不是IDE.之所以强大是因为他可以说是一个 ...