HTML5深入学习之 WebSQL 数据库

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML5深入学习之 WebSQL 数据库，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2170字，纯文字阅读大概需要4分钟。

内容图文

概述

　　WebSQL 并不是 HTML5规范的一部分，而是一个独立的规范，它可以用来做一些离线应用

核心API

• openDatabase() => 用来打开或创建数据库（没有时则创建，有则打开）
• transaction()　　=> 这个方法可以控制一个或多个事务，以及基于这种情况提交或者回滚
• executeSql()       =>用于执行实际的 SQl 查询

判断浏览器是否支持该项功能

　　这个功能可以在最新版的 chrome, Safari 和 Opera

　　

if (window.openDatabase) {
    // 操作 web SQL        
} else {
     alert('当前浏览器不支持 webSQL !!!');
}

打开数据库

　　　　　　　/**
             * 打开或创建数据库
             * @param1  数据库名称
             * @param2  版本号
             * @param3  描述
             * @param4  数据库大小
             * @param5  回调函数
            */
            var database = openDatabase('stu', '1.0', '学生表', 1024*1024, function () {});

开启一个事务

            // 开启事务
            database.transaction(function (sql) {
               // 在这里操作数据库的增删该查
            });    

新建表格

                sql.executeSql(
                    'create table duxiu(id int, name text)',
                    [],
                    function () {
                        alert('创建成功');
                    },
                    function () {
                        alert('创建失败');
                    }
                );

插入一条数据

                sql.executeSql(
                    // ? => 占位符
                    'insert into duxiu (id, name) values (?, ?)',
                    [2, '张三'],
                    function () {
                        alert('插入一条数据成功');
                    },
                    function () {
                        alert('插入一条数据失败');
                    }
                );

修改数据

                sql.executeSql(
                    'update duxiu set name = ?, id = ? where rowid = ?',
                    ['王五', 3, 3],
                    function () {
                        alert('修改成功');
                    },
                    function () {
                        alert('修改失败');
                    }
                );

查找数据

　　我这里是将数据查找出来并且显示到了表格中

　　

                sql.executeSql(
                    'select * from duxiu',
                    [],
                    function (sql, res) {
                        // console.log(res);
                        var data = res.rows;
                        console.log(data);
                        // console.log(data.length);
                        var table = document.createElement('table');
                        document.querySelector('div').appendChild(table);
                        for (var i = 0; i < data.length; i++) { 
                            var tr = document.createElement('tr');
                            table.appendChild(tr);
                            tr.innerHTML = '<td>' + data[i].id + '</td>';
                            tr.innerHTML += '<td>' + data[i].name + '</td>';
                        }
                        alert('查找成功');
                    },
                    function () {
                        alert('查找失败');
                    }
                );

删除数据

                sql.executeSql(
                    'delete from duxiu where id = ?',
                    [1],        // 参数
                    function () {
                        alert('删除数据成功');
                    },
                    function () {
                        alert('删除数据失败');
                    }
                );

删除表格

                sql.executeSql(
                    'drop table duxiu',
                    [],
                    function () {
                        alert('删除表成功');
                    },
                    function () {
                        alert('删除表失败');
                    }
                );

　　那么，是不是每个人都想过有没有删除数据库的方法呢? 反正我是想了并且去查了，答案是  没有！！！！！！！！

　　

内容总结

以上是互联网集市为您收集整理的HTML5深入学习之 WebSQL 数据库全部内容，希望文章能够帮你解决HTML5深入学习之 WebSQL 数据库所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---