用react创建App本地数据库(详细)：cordova-plugin-sqlite-2

最近写的项目由于普通的页面缓存无法满足部分功能，于是我就找到了这个cordova-plugin-sqlite，接下来我将用这个插件详细演示如何用react从零到基本完成增、删、改、查。

首先引入cordova插件

如果是Ionic：
ionic plugin add cordova-plugin-sqlite-2
其他的就是：
cordova plugin add cordova-plugin-sqlite-2

插件引入完成之后我们就配合实操图一步步完成基本功能

首先我们先声明一个数据库对象

let db = null

要注意库的创建/打开需要在cordova 的 deviceready 回调
函数后创建：

//创建/打开数据库
    createOrOpenSQL(){
        //库的创建需要在cordova 的 deviceready 回调函数后创建 所以要监听
        window.document.addEventListener('deviceready',
            function () {
                db = window.sqlitePlugin.openDatabase({
                        name: 'my.db',
                        location: 'default',
                    },
                    //回调函数，可传
                    function callBack(db) {
                        db.transaction((tx)=> {
                            console.log('创建、打开成功')
                        }, (err)=> {
                            console.log('Open databaseERROR: ' + JSON.stringify(err));
                        });
                    });
            },false);
    }

这样我们的数据库就创建完成了，为了方便测试，我在每次打开应用就会直接创建或打开数据库

然后就是建表，那么我们为了方便测试后续的简单功能，就暂且只用两个字段（id：自增id，data：被JSON.stringify过的数据），并且为了防止重复建表，写法如下：

db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS customerAccounts (id integer PRIMARY KEY autoincrement,data)');
        }, function (error) {
            console.log('表创建失败'+ error.message);
        },()=> {
            console.log('创表成功！')
        });

接下来就是数据库最核心的增删改查，四个方法分开贴在下方

 
    //添加数据
    addData(addData){
        db.transaction(function (tx) {
            let query = "INSERT INTO customerAccounts (id,data) VALUES (?,?)"
            tx.executeSql(query, [null,addData],
                function (tx, res){
                    console.log('添加成功',res,tx)
                },
                function (tx, error) {

                });
        }, (error)=> {
            //保存失败
            console.log('添加失败' + error.message);
        }, ()=> {
            console.log('添加成功')
        });
    }

    //删除
    handleDel(data){
        db.transaction(function (tx) {
            let query = "DELETE FROM customerAccounts WHERE id = ?";
            //根据选中的项的id来删除
            tx.executeSql(query, [data.id], function (tx, res) {
                },
                function (tx, error) {
                });
        }, function (error) {
            console.log('transaction error: ' + error.message);
        }, ()=> {
            console.log('删除成功')
            //删除后刷新列表
            this.handleRefresh()
        });
    }

    //编辑
    handleEdit(data){
        //测试用的修改后的数据 根据id替换相应的值
        let newItem = JSON.stringify({name:"修改后",age:100,sex:'男'})
        db.transaction(function (tx) {
            let query = "UPDATE customerAccounts SET data = ? WHERE id = ?";
            tx.executeSql(query, [newItem,data.id], function (tx, res) {

                },
                function (tx, error) {
                });
        }, function (error) {
            console.log({code:-1,message:error})
        }, ()=> {
            console.log('修改成功')
            //修改后刷新列表
            this.getSqlData().then((res)=>{
                console.log('asd')
                this.setState({
                    dataList:res
                })
            })
        });
    }

    //刷新数据
    handleRefresh(){
        this.getSqlData().then((res)=>{
            this.setState({
                dataList:res
            })
        })
    }
    //查看数据库数据
    getSqlData(){
        return new Promise(((resolve, reject) => {
            db.transaction(function (tx) {
                let query = "SELECT id,data FROM customerAccounts";
                tx.executeSql(query, [], (tx, resultSet) => {
                        //获取到数据后提取出我们要用的数据并整理用于展示
                        let list = []
                        for (let x = 0; x < resultSet.rows.length ;x++){
                            let item = JSON.parse(resultSet.rows.item(x).data)
                            item.id = JSON.parse(resultSet.rows.item(x).id)
                            list.push(item)
                        }
                        resolve(list)
                    },
                    function (tx, error) {
                    });
            }, function (error) {
                console.log('error:',error)
            }, function () {
                //成功
                console.log('resultSet')
            })
        }))
    }

实操图：

由于是突然起兴写的页面所以代码和页面布局都有点潦草，但是我们大致会用到的功能还是可以参考一下的。程序萌新欢迎纠错