前端存储数据时浏览器缓存不够用的解决办法

通常我们使用的浏览器缓存是这三种 cookie、localStorage、sessionStorage 最大的存储量只有5M。当项目缓存的东西比如：要素过多时根本不够用，所以考虑使用浏览器数据库 indexDB，大小由你的电脑存储盘决定。百度了一下感觉还挺复杂，其实很简单，存和取，完事。
废话不多说献上效果图：

1、使用必备的 一段代码奉上，封装一下indexDB,是为了更好的调用取，存，这段代码可以不用懂

要学会用就可以了。

取： INDEXDB.getItem('id', (res) => { console.log(res);  })

//id是存的键值，跟 localStorage.getItem(key);中的 key 一样。取也是用 key取，对应效果图中的 key列

//取 ，中的id 为什么第二个参数是匿名回调函数，是因为，取值是异步的，直接取当时不一定返回数据，所以需要用回调函数接一下，当数据确定取到后执行回调函数内的逻辑。

存：INDEXDB.setItem('id', 'insertData');

//存，第二个参数是存的值，该值可以为任意类型，数组对象都可以。对应效果图中 的value 列。

//========================================================== 浏览器    indexDB 使用 Stsrt=========

// * 先定义数据库数据
var Salt = {
    name: 'database',
    version: 6,//数据库的版本号，随便写死的一个常量，避免后续数据库升级，我们用的简单就是存一些数据。
    db: null,
    table: 'Indexdatabase'
}
// * 存储数据
// INDEXDB.setItem('id', 'insertData');
// * 取出数据
// INDEXDB.getItem('id', (res) => {
//     console.log(res);
// })
// * 删除数据
// INDEXDB.deleteItem('id');
// * 修改数据
// INDEXDB.putItem('id', 'newData')
var allEleData="";
var INDEXDB = {
    openDB(name, version, table, callback) {
        //当用户强制清空浏览器缓存时，同时删除数据库，因为数据库数据积累太多会导致查询速度变慢。也需要定期清理
        var isHasallEleData=localStorage.getItem("isHasdatabase");
        if(isHasallEleData===null){
            window.indexedDB.deleteDatabase(name);
        }
        var request = window.indexedDB.open(name, version);
        localStorage.setItem("isHasdatabase",1);
        request.onerror = function (e) {
            console.log(e.currentTarget.error.message);
        };
        request.onsuccess = function (e) {
            Salt.db = e.target.result;
            if (callback && (typeof callback === 'function')) {
                callback(Salt.db)
            }
        };
        // * 第一次打开该数据库，或者数据库版本发生变化
        request.onupgradeneeded = function (e) {
            var db = e.target.result;
            if (!db.objectStoreNames.contains(table)) {
                db.createObjectStore(table, {
                    keyPath: "id"
                });
            }
        };
    },
    setItem(key, val) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            try {
                var addData = [{
                    id: key,
                    value: val
                }]
                var transaction = Salt.db.transaction(Salt.table, 'readwrite');
                var store = transaction.objectStore(Salt.table);
                for (var i = 0; i < addData.length; i++) {
                    store.add(addData[i]);
                }
                INDEXDB.closeDB()
            } catch (error) {
                console.log(error);
            }
        });
    },
    getItem: function (val, back) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var request = store.get(val);
            request.onsuccess = function (e) {
                if (back && (typeof back === 'function')) {
                    if (e.target.result) {
                        back(e.target.result.value)
                    } else {
                        back('')
                    }
                    INDEXDB.closeDB()
                }

            }
        })
    },
    getAllItem: function (back) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var request = store.openCursor();
            request.onsuccess = function (e) {
                if (back && (typeof back === 'function')) {
                    if (e.target.result) {
                        back(e.target.result)
                    } else {
                        back('')
                    }
                    INDEXDB.closeDB()
                }
            }
        })
    },
    putItem(key, value) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var request = store.get(key);
            request.onsuccess = function (e) {
                try {
                    var resultData = e.target.result;
                    resultData.value = value;
                    var resultInfo = store.put(resultData);
                    resultInfo.onsuccess = function (e) {
                        if (e.type == 'success') {
                            INDEXDB.closeDB()
                        }
                    }
                } catch (error) {
                    INDEXDB.setItem(key, value)
                }
            };
        })

    },
    deleteItem(key) {
        INDEXDB.openDB(Salt.name, Salt.version, Salt.table, function () {
            var transaction = Salt.db.transaction(Salt.table, 'readwrite');
            var store = transaction.objectStore(Salt.table);
            var result = store.delete(key);
            result.onsuccess = function (e) {
                if (e.type == 'success') {
                    INDEXDB.closeDB()
                }
            }
        })
    },
    closeDB() {
        Salt.db.close();
    },
}
// * 初始化数据库
INDEXDB.openDB(Salt.name, Salt.version, Salt.table);

//========================================================== 浏览器    indexDB 使用 End===========

//结束了，就是这么简单