页面代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script src="../js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            //var db = window.openDatabase("Web Sql DB");

            //判断浏览器是否支持

            if(window.openDatabase)

            {

                //alert("浏览器支持");

                //创建数据库

                var db = window.openDatabase("Web_Sql_DB", "1.0", "Web SQL DB 测试", 20000);

                if(db)

                {

                    //alert("数据库创建成功！");

                    //创建表

                    db.transaction(function (tx) {

                        tx.executeSql("Create Table tb1(id int,title Text)");

                    });

                    //插入数据

                    db.transaction(function (tin) {

                        tin.executeSql("insert into tb1(id,title) values(?,?)",[2,"WEB SQL"]);

                    })

                    db.transaction(function (tin) {

                        tin.executeSql("insert into tb1(id,title) values(?,?)", [3, "JQuery"]);

                    })

                    //删除

                    //db.transaction(function (tin) {

                    //    tin.executeSql("delete from tb1 where title='WEB SQL'");

                    //})

                    //查询

                    db.transaction(function (tx) {

                        tx.executeSql("select * from tb1", [], function (x1, x2) {

                            for(var i=0;i<x2.rows.length;i++)

                            {

                                document.write("<b>" + x2.rows.item(i)['title'] + "</b><br/>")

                            }

                        }, function (x3) { });

                    })

                }

            }

            else {

                alert("浏览器 不 支持！！！");

            }

        })

    </script>

</head>

<body>

    Test Web SQL

</body>

</html>

执行结果：(由于刷新多次浏览器，导致重复数据)

HTML5 Web SQL Database 数据库的使用方法【图文说明】的更多相关文章

  1. （二）HTML5 - Web SQL 本地数据库

    简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...

  2. 小强的HTML5移动开发之路（20）——HTML5 Web SQL Database

    来自:http://blog.csdn.net/dawanganban/article/details/18220761 一.Web Database介绍 WebSQL数据库API实际上不是HTML5 ...

  3. HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作

    http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/ 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  4. web离线应用 Web SQL Database

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

  5. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

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

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

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

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

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

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

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

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

随机推荐

  1. C++经典面试题

    1.int a=5,则 ++(a++)的值是() A.5      B.   6          C.7       D.逻辑错误 a++返回的是一个暂时变量,这里是右值,不能再前面++了 2.以下 ...

  2. Educational Codeforces Round 7 A. Infinite Sequence 水题

    A. Infinite Sequence 题目连接: http://www.codeforces.com/contest/622/problem/A Description Consider the ...

  3. 树链剖分||dfs序 各种题

    1.[bzoj4034][HAOI2015]T2 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把 ...

  4. 深入研究Clang（三） libclang

    作者:史宁宁 如今的Clang,不不过一个编译器前端,同一时候也能够作为一个库使用.作为一个库使用的时候,能够用它去分析C/C++/ObjectC语言代码,能够分析源代码得到AST,也能够获取已经分析 ...

  5. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

  6. MySQL高可用之MHA的搭建 转

     http://www.cnblogs.com/muhu/p/4045780.html http://www.cnblogs.com/gomysql/p/3675429.html http://www ...

  7. spring事务的传播特性

    所谓事务传播行为就是多个事务方法相互调用时,事务如何在这些方法间传播.Spring 支持 7 种事务传播行为: PROPAGATION_REQUIRED 如果当前没有事务,就新建一个事务,如果已经存在 ...

  8. Web前段优化，提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  9. DNS服务器全面解析--转

    引用地址:http://pangge.blog.51cto.com/6013757/1273087 基础认知篇 DNS服务的概述 DNS是Domain Name System 的缩写,即域名系统.DN ...

  10. A*算法解决八数码问题 Java语言实现

    0X00 定义 首先要明确一下什么是A*算法和八数码问题? A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法也是一种启发性的算法,也是解决许多搜索问题的有效算法.算法中的距离估 ...