欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5深入学习之 WebSQL 数据库

程序员文章站 2022-10-08 21:58:39
概述 WebSQL 并不是 HTML5规范的一部分,而是一个独立的规范,它可以用来做一些离线应用 核心API openDatabase() => 用来打开或创建数据库(没有时则创建,有则打开) transaction() => 这个方法可以控制一个或多个事务,以及基于这种情况提交或者回滚 execu ......

概述

  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('删除表失败');
                    }
                );

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