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. JSP网站开发基础总结《八》

    JSP的学习总结到本篇已经八篇了,内容比较多,但都是实战,本篇最后为大家介绍一个小效果:百度分页.就是当我们遍历的数据对象较多时,这时我们就会看到了这个效果了,那他是如何实现的呢?下面我们就一起学习一 ...

  2. PHP内核的学习--创建PHP扩展

    开始看PHP内核也有一段时间了,现在开始边学边总结,今天就总结一下如何创建自己的PHP扩展. 我的环境如下: 系统:Ubuntu 14.04 php版本:5.5.19 参考摘录:用C/C++扩展你的P ...

  3. Unity3D 中的三个Update()方法

            MonoBehaviour.Update 更新 当MonoBehaviour启用时,其Update在每一帧被调用. MonoBehaviour.FixedUpdate 固定更新 当Mo ...

  4. CentOS 7.1 Bridge启用STP报错"Master connection not found or invalid"

    今天在公司测试Linux bridge搭建,为了使内部docker容器的网络能够不经过2层封装转发对外公布,顾试用一下bridge功能,结果碰到报错:"Bringing up interfa ...

  5. Spring学习总结(五)——Spring整合MyBatis(Maven+MySQL)一

    MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中. 使用这个类库中的类, Spring 将会加载必要的MyBatis工厂类和 session 类. 这个类库 ...

  6. jQuery 插件简单模板

    /*! * Copyright yunos.com All rights reserved. * jquery.scrollspy.js * @author v10258@qq.com * @vers ...

  7. 【小型系统】抽奖系统-使用Java Swing完成

    一.需求分析 1. 显示候选人照片和姓名. 2. 可以使用多种模式进行抽奖,包括一人单独抽奖.两人同时抽奖.三人同时抽奖. 3. 一个人可以在不同的批次的抽奖中获取一.二.三等奖,但是不能在同一批次抽 ...

  8. path入门 20141102-1405

    那Python有哪些缺点呢? 第一个缺点就是运行速度慢,和C程序相比非常慢, 第二个缺点就是代码不能加密. Python是解释型的 不是编译型的 Python解释器-CPython 命令行: 只需要在 ...

  9. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  10. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...