Explication et utilisation de la base de données HTML5 Web SQL

Pourquoi le tableau a-t-il disparu après l'actualisation de la page ? Qu'est-ce qu'openDatabase ? OpenDatabase est-il fourni par le navigateur ?

Web SQL simule une base de données sur un navigateur et vous pouvez utiliser JS pour faire fonctionner SQL afin de lire et d'écrire des données.

L'API Web SQL Database ne fait pas partie de la spécification HTML5, mais il s'agit d'une spécification distincte qui introduit un ensemble d'API pour manipuler les bases de données côté client à l'aide de SQL.

La base de données Web SQL fonctionne dans les dernières versions des navigateurs Safari, Chrome et Opera.

méthode de base

Voici les trois méthodes de base définies dans la spécification :

1. openDatabase : cette méthode crée un objet de base de données à l'aide d'une base de données existante ou d'une base de données nouvellement créée.
2. transaction : cette méthode nous permet de contrôler une transaction et d'effectuer une validation ou une annulation en fonction de cette condition.
3. executeSql : cette méthode est utilisée pour exécuter la requête SQL réelle.

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('删除成功')
        });
    })
},

}

Vue console webSQL