页面代码：

<!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. 从零开始学android开发-项目打包发布

    右键项目 选择[android tools]-[export signed application package] 点击[next] 如果没有keystore可以选择[create new keys ...

  2. C# GDI在控件上绘图

    本文以以在chart控件上和窗体上画矩形为例子 不多解释了,代码很简单. 还有一些童鞋要别的源码,给我发邮箱吧 using System; using System.Collections.Gener ...

  3. 【React Native 实战】二维码扫描

    1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...

  4. iOS开发——数据持久化Swift篇&（一）NSUserDefault

    NSUserDefault //******************** 5.1 NSUserDefault和对象归档 func useNSUserDefault() { //通过单利来创建一个NSU ...

  5. Linux下判断cpu物理个数、几核

    自己服务器的输出 1. 查看物理CPU的个数   #cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc -l    1 2. 查 ...

  6. [转]Oracle快速入门

    原文出处:http://blog.csdn.net/yueguanghaidao/article/details/7019377 select * from scott.salgrade; /*解锁s ...

  7. windows 8.1 在硬盘上创建扩展分区

    管理员-命令提示符-> diskpart    -->进入分区工具. list disk     -->显示电脑连接磁盘数. select disk *  -->选择编号为*的 ...

  8. 基于jQuery上下切换的焦点图—带缩略图悬浮

    分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...

  9. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  10. .NET 托管堆和垃圾回收

       托管堆基础 简述:每个程序都要使用这样或那样的资源,包括文件.内存缓冲区.屏幕空间.网络连接.....事实上,在面向对象的环境中,每个类型都代表可供程序使用的一种资源.要使用这些资源,必须为代表 ...