概述

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