页面代码：

<!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. Codeforces Gym 100015G Guessing Game 差分约束

    Guessing Game 题目连接: http://codeforces.com/gym/100015/attachments Description Jaehyun has two lists o ...

  2. ztree使用心得

    一个很好用的Jquery树形控件 官网:http://www.ztree.me/v3/main.php#_zTreeInfo 我主要引用的文件为: //最新版的JS压缩包 <script src ...

  3. 源码级分析Android系统启动流程

    首先看一下Android系统的体系结构,相信大家都不陌生 1.首先Bootloader引导程序启动完Linux内核后,会加载各种驱动和数据结构,当有了驱动以后,开始启动Android系统,同时会加载用 ...

  4. cocos2d-x游戏是怎么跑起来的

    虽然cocos2d-x v3.0 alpha版已经出来了,也改进了不少,有兴趣的可以去尝尝鲜.因为后面可能还会配合cocoStudio写一下博客,而现在v1.0.0.0版本需要配合cocos2d-x ...

  5. 第十二天--Property List和NSUserDefaults

    转自:http://appleparty.diandian.com/post/2012-05-24/9098104219 Property List  (属性表) 定义:Property List文件 ...

  6. 约瑟夫环问题及python与c++实现效率对比

    约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个人又出列;依此规律重 ...

  7. Linux服务器集群系统（二）--转

    引用地址:http://www.linuxvirtualserver.org/zh/lvs2.html LVS集群的体系结构 章文嵩 (wensong@linux-vs.org) 2002 年 4 月 ...

  8. 2dx解析cocosbuilder中使用layer时的缺陷

    2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...

  9. Mac 下抓包工具 Charles 修改特定请求

    Charles 是 Mac 下常用的抓包工具,它通过将自己设置成系统的代理服务器,从而完成了抓包的工作. 同类的工具还有 fiddler 和 Wireshark,其中 fiddler 是微软公司使用 ...

  10. 【Java/Android性能优2】Android性能调优工具TraceView介绍

    本文参考:http://www.trinea.cn/android/android-traceview/ Android自带的TraceView堪比java的性能调优工具visualvm线程视图,可以 ...