2021-08-30

前端存储数据的方式

字数统计: 1.2k字 | 阅读时长: 5分

前端数据存储方式

大小：约4kb

有效期：当前会话有效

获取/设置方式： document.cookie，如果开启http-only, 通过js脚本将无法读取到cookie信息

与服务端通信： http请求会自动携带cookie

localStorage

大小：一般5M

有效期：如果不清除，一直有效

获取/设置方式：包括基本增删查改的API

与服务端通信：只存在于客户端

sessionStorage

除了有效期为当前会话有效之外，其他同localStorage

indexDB

indexDB兼容性存在一定的问题，而且他本身也是异步获取数据，相比于cookie，storage来说，他要做的处理较多，但是存储容量大，依据浏览器规则不同在50M-250M之间，并且用户清除浏览器缓存时不会将其清除，在移动端不会受到ios无痕模式的影响，所以在一定程度来说，要比storage好上一些。

/* 
 {
        dbName: "test",   //数据库名称
        objName: "test1",  // 表名称
        param: { a: 1 },   // id值
        response: {        // 存储的value
          b: 2,
        },
 }
*/
export default class {
    constructor() {
        this.db = null;
    }
    getType(val) {
        let type = typeof val == "object";
        return type;
    }
    // 打开数据库
    open(parm) {
        return new Promise((res, rej) => {
            let request = window.indexedDB.open(parm.dbName, parm.versions);
            request.onerror = function(event) {
                console.log(event);
                // 错误处理
                rej();
                console.log(" 打开数据库报错");
            };
            request.onsuccess = event => {
                this.db = request.result;
                console.log("打开数据库成功");
                res();
                // 成功处理
            };
            // 数据库更新时的回调
            request.onupgradeneeded = event => {
                this.db = event.target.result;
                this.createdDB(parm);
            };
        });
    }
    // 创建库表
    createdDB(parm) {
        if (!this.db.objectStoreNames.contains(parm.objName)) {
            this.db.createObjectStore(parm.objName, {
                keyPath: "id"
            });
            // objectStore.createIndex("data", "data", { unique: false });
            // unique name可能会重复
        }
    }
    // 新增（不需要使用）
    async add(parm = { dbName, objName, param, response }) {
        await this.open(parm);
        // await this.upgrade(dbName);
        return new Promise((res, rej) => {
            let transaction = this.db.transaction([parm.objName], "readwrite");
            let objectStore = transaction.objectStore(parm.objName);

            // 用户读取数据，参数是主键
            let request = objectStore.add({
                id: JSON.stringify(parm.param),
                data: JSON.stringify(parm.response)
            });
            console.log(request);

            request.onsuccess = function(event) {
                res(event);
                console.log("数据写入成功");
            };

            request.onerror = function(event) {
                rej();
                console.log("数据写入失败");
            };
        });
    }
    // 读取库表数据
    async read(parm = { dbName, objName, param, response }) {
        await this.open(parm);

        return new Promise((res, rej) => {
            let type = this.getType(parm.param);

            var transaction = this.db.transaction([parm.objName]);
            var objectStore = transaction.objectStore(parm.objName);
            // 用户读取数据，参数是主键
            var request = objectStore.get(
                type ? JSON.stringify(parm.param) : parm.param
            );

            request.onerror = function(event) {
                console.log("事务失败");
                rej();
            };

            request.onsuccess = function(event) {
                if (request.result) {
                    let data = JSON.parse(request.result.data);
                    res(data);
                } else {
                    res(request.result);
                    console.log("未获得数据记录");
                }
            };
        });
    }
    // 修改库表数据,但是因为创建数据库时直接创建了库表,所以无论是添加还是修改都掉这个就可以了.
    async update(parm = { dbName, objName, param, response }) {
        await this.open(parm);

        return new Promise((res, rej) => {
            let type = this.getType(parm.param);
            var request = this.db
                .transaction([parm.objName], "readwrite")
                .objectStore(parm.objName)
                .put({
                    id: type ? JSON.stringify(parm.param) : parm.param,
                    data: type ? JSON.stringify(parm.response) : parm.response
                });

            request.onsuccess = function(event) {
                res();
                console.log("数据更新成功");
            };

            request.onerror = function(event) {
                rej();
                console.log("数据更新失败");
            };
        });
    }
    // 删除某个表的数据
    async remove(parm = { dbName, objName, param, response }) {
        await this.open(parm);

        return new Promise((res, rej) => {
            let type = this.getType(parm.param);

            var request = this.db
                .transaction([parm.objName], "readwrite")
                .objectStore(parm.objName)
                .delete(type ? JSON.stringify(parm.param) : parm.param);

            request.onsuccess = function(event) {
                res();
                console.log("数据删除成功");
            };
        });
    }
}

webSQL

跟SQL很像，也是写SQL语句

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

核心方法

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

打开（创建）数据库

使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});