Explicación y uso de la base de datos HTML5 Web SQL

¿Por qué desaparece la tabla después de actualizar la página? ¿Qué es base de datos abierta? ¿El navegador proporciona openDatabase?

Web SQL simula una base de datos en un navegador, y puede usar JS para operar SQL para leer y escribir datos.

La API de base de datos Web SQL no forma parte de la especificación HTML5, pero es una especificación independiente que introduce un conjunto de API para manipular bases de datos del lado del cliente mediante SQL.

La base de datos Web SQL funciona en las últimas versiones de los navegadores Safari, Chrome y Opera.

metodo central

Los siguientes son los tres métodos principales definidos en la especificación:

1. openDatabase: este método crea un objeto de base de datos utilizando una base de datos existente o una base de datos recién creada.
2. transacción: este método nos permite controlar una transacción y realizar una confirmación o reversión en función de esta condición.
3. ejecutarSql: este método se utiliza para ejecutar la consulta SQL real.

db = {};

created(){
    // 页面每次加载 调用 初始化
    this.handleCreateSql();
},

methods:{

// 初始化
handleCreateSql(){
    /* 
    * openDatabase 作用：
    * 初始化 web SQL 对象
    * after.. 可打开已创建过的 web SQL 数据库表
    * after.. 可用于创建新的 web SQL 数据库表
    */
    this.db = openDatabase(
        `zu_db`,
        "1.0",
        `我创建的db`,
        2 * 1024 * 1024,
        ()=>{}
    );
    /* 
    * 依次解析：
    * 1.数据库名称
    * 2.数据库版本号 (随便填写就行)
    * 3.数据库描述 (随便填写就行)
    * 4.数据库大小  (正常这个就够用了，不够用自己改一下就行)
    * 5.回调函数 (不必须，这个回调函数本人试过，貌似不好用-_-) 所以猜测应该是初始化
    * 失败后回调用的)
    */
    
    // transaction 控制提交或回滚
    // CREATE TABLE IF NOT EXISTS 不存在就创建，存在就不创建
    this.db.transaction(function(tx) {
        tx.executeSql(
        "CREATE TABLE IF NOT EXISTS T_TABLE (id, name, age, createDate)"
        );
    });
},

/* 
* executeSql 提供了四个参数：
* 1.字符串的SQL语句 (必须)
* 2.对应SQL语句中的问号参数，使用[]传入 (不必须)
* 3.成功时的回调函数 函数中的返回参数分别是 (tx,results) (不必须)
* 4.失败时的回调函数 函数中的返回参数分别是 (tx,results) (不必须，results对象内
* 提供失败信息)
*/

// 取表id最大的数据
async getMaxId(){
    const result = await new Promise((resolve) =>
        this.db.transaction(function(tx) {
            let id = 0;
            tx.executeSql("SELECT * FROM T_TABLE where id=(select max(id) FROM T_TABLE)",
            [], 
            (tx, results) => {
                if(results.rows.length > 0){
                    id = results.rows[0].id;
                }
                resolve(id + 1)
            });
        })
    );
    return result;
},

// 添加数据
async handleAddSql(){
    const id = await this.getMaxId()
    const the = this;

    this.db.transaction(function(tx) {
        tx.executeSql(
        "INSERT INTO T_TABLE (id, name, age, createDate) values (?, ?, ?, ?)",
        [id, the.sql.name, the.sql.age, '2022-02-28'],
        (tx, results) =>{
            console.log('追加成功')
        });
    });
},

// 检索数据
this.db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM T_TABLE", [], function(tx, results) {
        console.log('results =>',results.rows)
    });
});

// 修改数据
handleUpdateSql(){
    const the = this;
    this.db.transaction(function(tx) {
    tx.executeSql("UPDATE T_TABLE set name = ? , age = ? where id = ?", 
        [the.sql.name, the.sql.age, the.sql.id], 
        (tx, results) => {
            console.log('修改成功')
        });
    })
},

// 删除表
handleDropSql(){
    this.db.transaction(function(tx) {
        tx.executeSql("drop table T_TABLE", [], (tx, results) => {
            console.log('删除成功')
        });
    })
},

}

Vista de consola webSQL