页面代码：

<!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. PS-文字如何竖排版

    单击文字输入工具“T”按钮,点住鼠标左键不要松手,会在“T”按钮的右边显示出其它形式的文字工具,拖动鼠标指向“直排文字”工具就可以了.

  2. .NET连接SAP系统专题：C#调用RFC代码（三）

    本文就说明在C#中如何编写代码来调用SAP中的RFC函数获取数据. 首先需要引用两个NCO3.0的DLL DLL下载地址:http://files.cnblogs.com/mengxin523/SAP ...

  3. 即时通信(RPC)的Rtmp实现--配置篇

    http://flexman.blog.sohu.com/129838570.html http://flexman.blog.sohu.com/130007574.html step 1: 首先要确 ...

  4. oracle where 后面的条件中|| 是什么意思

    oracle where 后面的条件中|| 是连接符号,Oracle中另一个concat函数能够连接两个字符串 concat(a,b) Oracle中nvl函数的使用方法和作用是什么? 假设你某个字段 ...

  5. 垃圾回收GC:.Net自己主动内存管理 上(一)内存分配

    垃圾回收GC:.Net自己主动内存管理 上(一)内存分配 垃圾回收GC:.Net自己主动内存管理 上(一)内存分配 垃圾回收GC:.Net自己主动内存管理 上(二)内存算法 垃圾回收GC:.Net自己 ...

  6. 模块化JavaScript设计模式(一)

    在可扩展JavaScript的世界里,假设我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成. 在可能的情况下.通过一处依赖性.松耦合 ...

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

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

  8. 关于删除7z历史解压路径

    目前7zip尚无此功能,只能从注册表入手了,7zip历史记录保存在注册表 HKEY_CURRENT_USER\Software\7-Zip\FM 下的CopyHistory和FolderHistory ...

  9. C#面向对象（三）接口实现多态

    一.如何用接口实现多态? 1.定义一个接口. using System; using System.Collections.Generic; using System.Linq; using Syst ...

  10. Cable master（二分题 注意精度）

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26596   Accepted: 5673 Des ...