WebSQL的简单使用

什么是WebSql

WebSQL是一种运行在浏览器中的结构化数据库，类似于Android的
SQLite，使用方式几乎与SQL一致，丰富了浏览器的特性。
但 WebSQL 数据库 API 并不是 HTML5 规范的一部分，它是一个独立的规范。

简单使用

/**
 * 打开一个数据库，若没有则创建
 * 参数为 1.数据库名称  2.版本号  3.描述文本  4.数据库大小(单位Byte)  5.创建成功回调
 */
const db = openDatabase('article', '1.0', '文章', 10 * 1024 * 1024,(database)=>{});

/* 创建数据库表 */
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS article(id unique, title, content,author, createTime)');
});

/* 插入一条数据 */
export const saveArticle = function ({id, title, content,author, createTime}) {
    db.transaction(function (tx) {
        tx.executeSql(`INSERT INTO article(id, title, content,author, createTime) values(?,?,?,?,?)`,
            [id, title, content, author, createTime]);
    });
}

/* 更新字段 */
export const updateArticle = function (id,author) {
    db.transaction(function (tx) {
        tx.executeSql(`UPDATE article SET author = ? WHERE id = ?`,[author,id]);
    });
}

/* 删除记录 */
export const deleteArticle = function (id) {
    db.transaction(function (tx) {
        tx.executeSql(`DELETE FROM article WHERE id = ?`,[id]);
    });
}

/* 利用Promise封装查询操作，因为查询是异步，需要通过回调获取数据 */
function queryData(sql, params) {
    return new Promise(function (resolve, reject) {
        db.transaction(tx => {
            tx.executeSql(sql, params, function (tx, rs) {
                resolve(rs)
            }, function (tx, error) {
                reject(error)
            })
        })
    });
}

/* 简单一个分页查询返回数据列表和总数 */
export const pageArticle = function (page,size) {
    let start = (page - 1) * size;
    let q1 = queryData('SELECT COUNT(*) as count FROM article',[]).then(rs => {
        return rs.rows.item(0).count;
    })
    let q2 = queryData('SELECT * FROM article ORDER BY createTime DESC LIMIT ?,?',[start,size]).then(rs => {
        let len = rs.rows.length;
        let list = [];
        for (let i = 0; i < len; i++) {
            list.push(rs.rows.item(i))
        }
        return list;
    })

    Promise.all([q1,q2]).then(data => {
        return {
            total: data[0],
            list: data[1]
        }
    })
}