页面代码：

<!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. Winform 导出成Excel打印代码

    WinForm中 直接调用Excel的打印预览功能,但不显示Excel文件 using Microsoft.Office.Interop.Excel; //引用 public void PrintPr ...

  2. printf打印

    printf 打印变量(整型,浮点型,双精度型,字符型,字符串类型) 整型: printf("%d",a); 打印出整形变量a 浮点型:printf("%f", ...

  3. [AngularJS] Best Practise - Module

    Module definitions Angular modules can be declared in various ways, either stored in a variable or u ...

  4. MyReport：DataGrid的打印和打印预览

    本文说明怎样使用MyReport来实现Flex DataGrid组件的自己主动化打印预览和打印功能. 实现代码 <? xmlversion="1.0" encoding=&q ...

  5. GDB---Oracle Function Call List

    http://yong321.freeshell.org/Oracle Function Call List 1. Oracle function call list If you want to s ...

  6. Cannot instantiate the type HttpClient问题

    看自己动手写爬虫,没想到一上来就跪了. 里面提到用的jar包是apache的http客户端开源项目---HttpClient 就去官网下载了一个版本4.3 当按书上代码敲时 HttpClient ht ...

  7. mysql主从复制 主从配置(windows系统上)

    OS:Windows7 DB:MYSQL5.6.2 1.正常安装第一个mysql(安装步骤省略)  2.在控制面板里停止第一个mysql服务  3.将C:\Program Files\MySQL目录下 ...

  8. 基于jquery tool实现的windows桌面效果

    今天给大家分享一款基于jquery tool实现的windows桌面效果.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: ...

  9. linux用户权限

    Linux下passwd和shadow文件内容详解 一./etc/passwd/etc/passwd 文件是一个纯文本文件,每行采用了相同的格式: name:password:uid:gid:comm ...

  10. Java学习笔记——内部类及其调用方法

    一.static内部类的static方法 public class Test0719_Inner_Test { public static void main(String[] args) { //s ...