基于 Localstorage 设计一个 1M 的缓存系统，需要实现缓存淘汰机制

[TieMuZhen]

设计思路如下：

• 存储的每个对象需要添加两个属性：分别是过期时间和存储时间。
• 利用一个属性保存系统中目前所占空间大小，每次存储都增加该属性。当该属性值大于 1M 时，需要按照时间排序系统中的数据，删除一定量的数据保证能够存储下目前需要存储的数据。
• 每次取数据时，需要判断该缓存数据是否过期，如果过期就删除。

以下是代码实现，实现了思路，但是可能会存在 Bug，但是这种设计题一般是给出设计思路和部分代码，不会需要写出一个无问题的代码

class Store {
	constructor() {
		let store = localStorage.getItem('cache')
		if (!store) {
			store = {
				maxSize: 1024 * 1024,
				size: 0
			}
			this.store = store
		} else {
			this.store = JSON.parse(store)
		}
	}
	set(key, value, expire) {
		this.store[key] = {
			date: Date.now(),
			expire,
			value
		}
		let size = this.sizeOf(JSON.stringify(this.store[key]))
		if (this.store.maxSize < size + this.store.size) {
			console.log('超了-----------');
			var keys = Object.keys(this.store);
			// 时间排序
			keys = keys.sort((a, b) => {
				let item1 = this.store[a], item2 = this.store[b];
				return item2.date - item1.date;
			});
			while (size + this.store.size > this.store.maxSize) {
				let index = keys[keys.length - 1]
				this.store.size -= this.sizeOf(JSON.stringify(this.store[index]))
				delete this.store[index]
			}
		}
		this.store.size += size

		localStorage.setItem('cache', JSON.stringify(this.store))
	}
	get(key) {
		let d = this.store[key]
		if (!d) {
			console.log('找不到该属性');
			return
		}
		if (d.expire > Date.now) {
			console.log('过期删除');
			delete this.store[key]
			localStorage.setItem('cache', JSON.stringify(this.store))
		} else {
			return d.value
		}
	}
}

参考文章

• 几道高级前端面试题解析