<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <script>

        window.onload = function () {

            var one = document.getElementById('one');

            if (window.openDatabase) {

                var dataBase = openDatabase("student", "1.0", "学生表", 1024*1024, function() {

                });

                dataBase.transaction(function (fx) {

                    //创建一个表

                    fx.executeSql(

                        "create table if not exists stu (id REAL UNIQUE, name TEXT)",

                        [],

                        function () {  //表创建成功

                            alert("表创建成功");

                        },

                        function () {  //表创建失败

                            alert("表创建失败");

                        }

                    );

                    //插入数据

                    fx.executeSql(

                        "insert into stu (id, name) values(?, ?)",

                        [1, "张三"],

                        function () {  //表创建成功

                            alert("数据插入成功");

                        },

                        function () {  //表创建失败

                            alert("数据插入失败");

                        }

                    );

                    //更新数据

                    fx.executeSql(

                        "update stu set name = ? where id = ?",

                        ["李四", 1],

                        function () {  //表创建成功

                            alert("数据更新成功");

                        },

                        function () {  //表创建失败

                            alert("数据更新失败");

                        }

                    );

                    //查询数据

                    fx.executeSql(

                        "select * from stu",

                        [],

                        function (fx, result) {  //表创建成功

                            // alert(result.rows.length);

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

                                one.innerHTML = result.rows.item(i)['name'];

                            }

                            alert("数据查询成功");

                        },

                        function () {  //表创建失败

                            alert("数据查询失败");

                        }

                    );

                    //删除数据

                    fx.executeSql(

                        "delete from stu where id=?",

                        [1],

                        function (fx, result) {  //表创建成功

                            one.innerHTML = "";

                        },

                        function () {  //表创建失败

                            alert("删除失败");

                        }

                    );

                    //删除表

                    fx.executeSql(

                        "drop table stu",

                        [],

                        function (fx, result) {  //表创建成功

                            alert("表删除成功");

                        },

                        function () {  //表创建失败

                            alert("表删除失败");

                        }

                    );

                })

            }

        }

        </script>

    </head>

    <body>

        <p id="one">测试</p>

    </body>

</html>

html ---- web sql 例子的更多相关文章

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

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

  2. [转]HTML5本地存储——Web SQL Database

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

  3. (转)HTML 5离线存储之Web SQL

    原文:http://developer.51cto.com/art/201106/267357.htm HTML 5离线存储之Web SQL 2011-06-07 15:14 kkun kkun的博客 ...

  4. HTML5本地存储——Web SQL Database与indexedDB

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

  5. 关于web浏览器的Web SQL和IndexedDB

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

  6. Web SQL与indexedDB

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

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

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

  8. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

随机推荐

  1. selenium从入门到应用 - 1，环境准备（Java+TestNG+Maven+Selenium）

    本系列所有代码 https://github.com/zhangting85/simpleWebtest 本文将介绍一个Java+TestNG+Maven+Selenium的web自动化测试脚本环境的 ...

  2. win7不休眠方式设置

    方式1:命令行下以管理员方式执行:powercfg -h off 方式2:右键个性化-->屏幕保护程序-->更改电源设置--->更改计算机睡眠时间--->是计算机进入睡眠状态选 ...

  3. 使用FREDATED引擎实现跨实例訪问

    跨数据库server.跨实例訪问是比較常见的一种訪问方式,在Oracle中能够通过DB LINK的方式来实现. 对于MySQL而言,有一个FEDERATED存储引擎与之相相应.相同也是通过创建一个链接 ...

  4. Docker Push 镜像到公共仓库

    首选需要在https://hub.docker.com/上注册用户. 1.登录docker账号主要命令:docker login sudo docker login 2.推送镜像主要命令:docker ...

  5. 无法调试存储过程，无法启动T-SQL调试

    用本机管理员或者具有SYSADMIN角色的帐号登录,不要用.,用实例名来连接

  6. Oracle Golden Gate基本配置

    >> from zhuhaiqing.info [oracle@localhost ogg]$ cat ~/.bash_profile GG_HOME=/opt/oggPATH=$PATH ...

  7. 修改eclipse的repository路径

    (1)首先修改你的settings.xml文件,(如果没有settings.xml文件,可以下载maven的官网把maven的插件下载下来,在apache-maven-3.5.0\conf\ 目录下有 ...

  8. 第1章列表处理——1.1 Lisp列表

    Lisp是啥? Lots of Isolated Silly Parentheses (大量分离的愚蠢的括号) Lisp指的是"LISt Processing"(列表处理),通过把 ...

  9. 如何开启Apache Rewrite功能

    一.Ubuntu默认未开启Rewrite支持 apche模块加载工作已分散到不同的配置文件,这样看起来似乎更为合理,管理起来也非常方便.下面看一下如何开启Rewrite模块,当用户需使用301重定向. ...

  10. UFLDL深度学习笔记 （五）自编码线性解码器

    UFLDL深度学习笔记 (五)自编码线性解码器 1. 基本问题 在第一篇 UFLDL深度学习笔记 (一)基本知识与稀疏自编码中讨论了激活函数为\(sigmoid\)函数的系数自编码网络,本文要讨论&q ...