客户端数据库存储

/*
* 一: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? )
*
* */

一:创建数据库

    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('事务执行成功')
            })
        }
    }

 

你可能感兴趣的:(前端)