客户端数据库存储

/*
* 一：Web Storage存储 (存储少量数据5MB)
*   1.sessionStorage  保存会话数据，临时存储数据,浏览器关闭数据丢失; 数据被保存在session对象中。
*       sessionStorage对象的方法：
*           sessionStorage.setItem(key,value)
*           sessionStorage.getItem(key) //key不存在返回null
*           sessionStorage.removeItem(key)
*           sessionStorage.clear()
*
*   2.localStorage    在客户端长期保存数据
*       localStorage对象的方法：
*           localStorage.setItem(key,value)
*           localStorage.getItem(key)
*           localStorage.removeItem(key)
*           localStorage.clear() //清空全部数据
*
*       遍历localStorage数据：for(let i=0; i<localStorage.length; i++){}
*
*   3.使用JSON对象存储数据
*       通过localStorage数据与JSON对象的转换可以存储更多数据
*           JSON.parse(data) 将数据转为JSON对象
*           JSON.stringify(obj) 将实体对象转为JSON格式的文本数据集
*
*
* 二：Web SQL数据库（Web SQL Database, WebDB）,其内置SQLite数据库，存储数据大小可自定义设置
*   WebDB实现本地存储的方法：通过事务驱动实现对数据的管理
*       1.创建/打开数据库
*           openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback()); //DBSize单位B,1MB=1*1024*1024
*
*       2.使用transaction方法执行事务（executeSql方法执行sql语句）'?'表示形参
*       建表：create table if not exists tableName (column type, ...)
*       新增：insert into tableName values (?,?,?,?,...) [val1,val2,val3,val4,...]
*       更新：updata tableName set column1=?,column2=?,... where 表达式 [val1,val2,...]
*       删除：delete from tableName where 表达式
*       查询：select * from tableName where 表达式（例子userId<>? ）
*
* */

一：创建数据库

    var db;
    //创建打开WebDb
    function creatDb() {
        // db用于保存打开的数据库对象
        db = openDatabase('MyDb', '1.0.0', 'MyDbTest', 5 * 1024 * 1024, function () {
            console.log('webDb数据库创建成功')
        });
    }

二：创建表

    /*
    * 执行事务：使用数据库对象中transaction方法执行事务处理
    * transaction(transCallback,ErrorCallback,SuccessCallback)
    * */
    function createTrans() {
        // 连接数据库
        db = openDatabase('MyDb', '1.0.0', 'MyDbTest', 5 * 1024 * 1024);
        if (db) {
            // 创建表
            var sql = 'create table if not exists userInfo';
            sql += '(userId unique,userName text,sex text,addr text)';
            // 执行sql
            db.transaction(function (transaction) {
                transaction.executeSql(sql)
            }, function (error) {
                console.log('事务执行出错')
                console.log(error)
            }, function () {
                console.log('事务执行成功')
            })
        }
    }

三：插入表数据

    /*
    * 表新增数据：executeSql('insert into tableName values (?,?,?,?)',[value1,value2,...],,)
    * */
    function addUserInfo() {
        db = openDatabase('MyDb', '1.0.0', 'MyDbTest', 5 * 1024 * 1024);
        if (db) {
            var sql = 'insert into userInfo values (?,?,?,?)';
            db.transaction(function (transaction) {
                transaction.executeSql(sql, [
                    '1',
                    '张三',
                    '男',
                    '广东深圳'
                ], function () {
                    console.log('成功添加一条数据')
                }, function (tx, er) {
                    console.log(tx)
                    console.log(er)
                })
            }, function (error) {
                console.log('事务执行出错')
                console.log(error)
            }, function () {
                console.log('事务执行成功')
            })
        }
    }