localStorage存爆了怎么办？

简介

作为前端开发人员，localStorage和sessionStorage是会经常用到的，之前由于项目原因，存爆的情况是几乎不存在，所以一直没有写过针对存爆的逻辑，然而最近做一个功能，就是在大文件上传，存MD5的时候，考虑到会存爆，就从头到尾写了一遍，接下来就和大家分享一下我的思路。

处理逻辑

处理存爆的中心思想就是用新的去替换无用的项，什么算无用的，就要看你们的业务具体是什么了？就比如，大文件上传，我定义的所谓无用的就是最早上传的那个，我会去找到它，然后删除，在存上新文件的MD5，那么，接下来，咱们就顺着这个思路，具体讲下逻辑。。。

首先呢，怎么去定义每个文件的时间呢，或者说以什么结构是设计呢？我是这么去设计的，我会把文件名当做localStorage的key，value设计为一个对象，它有两个属性，一个是MD5，一个就是存到本地时的时间，value的具体结构如下所示：

    let obj = {
       time: +new Date(),
       value: md5
   }

OK，有了结构，咱们就开始写存localStorge的逻辑，在讲之前，先说下，如果判断存爆，很简单，就是利用try.catch，因为存爆的时候会报错的，具体代码逻辑如下所示：

	let storageOperation = {
		storgeSet: new Set(),
		setStorage: function() {
			try {
                let obj = {
                    time: +new Date(),
                    value
                }
                localStorage.setItem(key, JSON.stringify(obj));
                // 如果存在相同的，刪除对应的
                if (this.storgeSet.has(key)) {
                    this.storgeSet.delete(key)
                }
                this.storgeSet.add(key)
            } catch (err) {
            	// 报错处理
            }
		}
	} 

时间存上去了，咱们就需要对已有存的，按照时间进行排序，然后删除最早的，具体代码如下所示：

	let storageOperation = {
        storgeSet: new Set(),
        setStorage: function (key, value) {
            try {
                let obj = {
                    time: +new Date(),
                    value
                }
                localStorage.setItem(key, JSON.stringify(obj));
                // 如果存在相同的，刪除对应的
                if (this.storgeSet.has(key)) {
                    this.storgeSet.delete(key)
                }
                this.storgeSet.add(key)
            } catch (err) {
                this.removeStorage(key, value)
            }
        },
        removeStorage: function  (key, value) {
            // 先排序，找到最早存的，然后删除即可
            this.sortStorge();
            // 删除最早的
            for (let oldKey of this.storgeSet) {
                localStorage.removeItem(oldKey)
                this.storgeSet.delete(oldKey)
                break
            }
            // 存上最新的
            this.setStorage(key,value)
        },
        // 排序
        sortStorge: function () {
            let temp = [];
            for (let key in localStorage) {
                if (localStorage.hasOwnProperty(key)) {
                    temp.push({
                        key,
                        value: localStorage[key] ? JSON.parse(localStorage[key]) : ''
                    })
                }
            }
            for (let outIndex = 0; outIndex < temp.length - 1; outIndex++) {
                let min = outIndex
                for (let innerIndex = outIndex + 1; innerIndex < temp.length; innerIndex++) {
                    if (temp[innerIndex].value.time < temp[min].value.time) {
                        min = innerIndex
                    }
                }

                if (min != outIndex) {
                    const swapTemp = temp[min]
                    temp[min] = temp[outIndex]
                    temp[outIndex] = swapTemp
                }
            }
            for (let i=0,len=temp.length;i<len;i++) {
                this.storgeSet.add(temp[i].key)
            }
        }
    }

以上就是存爆的所有逻辑了，代码我不在一一解读，没有什么复杂的逻辑，相信大家都可以看的懂，最后，咱们在写一个获取的逻辑，具体代码如下：

        getStorage: function(key) {
            let localValue = localStorage.getItem(key);
            let data = localValue ? JSON.parse(localValue) : '';
            return data.value
        }

全部代码如下：

var storageOperation = {
        storgeSet: new Set(),
        getStorage: function(key) {
            let localValue = localStorage.getItem(key);
            let data = localValue ? JSON.parse(localValue) : '';
            return data.value
        },
        setStorage: function (key, value) {
            try {
                let obj = {
                    time: +new Date(),
                    value
                }
                localStorage.setItem(key, JSON.stringify(obj));
                // 如果存在相同的，刪除对应的
                if (this.storgeSet.has(key)) {
                    this.storgeSet.delete(key)
                }
                this.storgeSet.add(key)
            } catch (err) {
                this.removeStorage(key, value)
            }
        },
        removeStorage: function  (key, value) {
            // 先排序，找到最早存的，然后删除即可
            this.sortStorge();
            for (let oldKey of this.storgeSet) {
                localStorage.removeItem(oldKey)
                this.storgeSet.delete(oldKey)
                break
            }
            this.setStorage(key,value)
        },
        // 排序
        sortStorge: function () {
            let temp = [];
            for (let key in localStorage) {
                if (localStorage.hasOwnProperty(key)) {
                    temp.push({
                        key,
                        value: localStorage[key] ? JSON.parse(localStorage[key]) : ''
                    })
                }
            }
            for (let outIndex = 0; outIndex < temp.length - 1; outIndex++) {
                let min = outIndex
                for (let innerIndex = outIndex + 1; innerIndex < temp.length; innerIndex++) {
                    if (temp[innerIndex].value.time < temp[min].value.time) {
                        min = innerIndex
                    }
                }

                if (min != outIndex) {
                    const swapTemp = temp[min]
                    temp[min] = temp[outIndex]
                    temp[outIndex] = swapTemp
                }
            }
            for (let i=0,len=temp.length;i<len;i++) {
                this.storgeSet.add(temp[i].key)
            }
        }
    }

以上就是本地存储的全部逻辑的，大家如果想测试的话，可以写个while循环即可~