(JavaScript - 原生)WEB SQL

                                   (JavaScript - 原生)WEB SQL

---

上一期与大家分享的是关于H5新特性的(WEB 本地存储),这一期再给大家送上一部重头戏就是 WEB SQL。没错不仅仅是后端有数据库,甚至我们的 JavaScript 也可以连接数据库。

WEB SQL 是什么?

我们都知道即使是后端的数据库实质上也都是将数据保存在本地磁盘的文件中,只不过数据库用特殊的方式将那些文件进行集中管理了。WEB SQL 是 H5 新提供的特性可以将前台数据存储到本地实际上比较 localStorage/sessionStorage 来说更加高级。(虽然这个方案已经被 W3C 弃用,但是还是被广泛应用)

为什么要使用 WEB SQL?

作为客户端离线存储这一块, sessionStorage 显然不合适 - 因为其存活周期太短、localStorage 倒是满足要求,但是在处理一些关系的时候极为麻烦、WEBSQL 正好派上了用场。

怎么使用 WEB SQL?

> - 创建数据库帮助对象。

> - 通过帮助对象去调用事务方法(我们的一切都是要在这一个个事务方法中进行的)

> - 初始化数据库

> - 添加/更新/删除 数据库中的数据

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB SQL 数据库存储
         */

        // 创建数据库帮助对象 -> openDatabase(数据库名称, 数据库版本号, 描述文本, 数据库大小, 创建回调)


        void(function() {
            // 定义创建数据表语句
            let sql = '';

            let dbHelper = openDatabase("webdb", "1.0", "TestDB", 2 * 1024 * 1024);


            sql = "CREATE TABLE IF NOT EXISTS employee (id unique, name)";

            // 初始化数据库
            dbHelper.transaction((tx) => {
                // 初始化数据表
                tx.executeSql(sql);
                // 初始化表中的数据
                sql = "insert into employee(id, name) values(1, 'LJ')";

                tx.executeSql(sql);

                sql = "insert into employee(id, name) values(2, 'XXY')";
                tx.executeSql(sql);
                console.log("表中的数据初始化完毕");
            });
            console.log("数据库初始化完毕");

            // 更新数据库数据
            dbHelper.transaction((tx) => {
                let sql = "update employee set name=\'XXYBeauty\' where id=2";
                tx.executeSql(sql);
                console.log("数据库更新完毕");
            });

            // 删除数据库数据
            dbHelper.transaction((tx) => {

                let sql = "delete from employee where id=2";
                tx.executeSql(sql);
            });

            // 查询数据库数据
            dbHelper.transaction((tx) => {
                let sql = "select * from employee";

                tx.executeSql(sql, [], (tx, res) => {
                    // 读取数据信息
                    for(let i = 0;i < res.rows.length;i++) {
                        console.log(res.rows.item(i));
                    }
                }, null);
            })

        })();

    }
</script>

那么我们看一下效果:

首先 go 谷歌浏览器

再通过 sqllite数据库 查看

如果再往深刨就是这个数据库文件究竟在哪?

这个文件不要用记事本打开,即使打开也是乱码。这个文件就是 WEB SQL 的产物。

哈哈通过以上的说明与代码相信 WEB SQL 的使用我们初步会玩了!