第 104 题：模拟 localStorage 时如何实现过期时间功能？

Question

在 HTML5 中，加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 Cookie 存储空间不足的问题（Cookie 中每条 Cookie 的存储空间为 4k），localStorage 中一般浏览器支持的是 5M 大小，这个在不同的浏览器中 localStorage 会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成 JSON 格式，取出的时候再转换回来。

Answer 1

localstorage本身没有时间过期的功能，要是自己封装一个简单的localstorage功能的话，可以使用定时器去实现过期时间的功能，值得注意的是执行定时器后，到指定的时间，记得destroy定时器。

export class mockLocalstorage {
  constructor() {
    this.store = new Map(); // 记录存储数据
  }

  getItem(key) {
    const stringKey = String(key);
    if (this.store.has(stringKey)) {
      return String(this.store.get(stringKey));
    } else {
      return null;
    }
  }

  // time单位是小时
  setItem(key, val, time = "undefined") {
    let stime = null;
    if (typeof time !== "number" && time !== "undefined") {
      throw new Error("设置过期时间的基础单位是小时，请不要破坏规则！");
    }

    if (time !== "undefined") {
      time = time * 60 * 60 * 1000; // h ---> ms
      try {
        let _this = this;
        this.store.set(String(key), val);
        // 设置定时器 定时清空垃圾数据
        stime = setTimeout(() => {
          _this.removeItem(key);
          stime = null;
        }, time);
      } catch (e) {
        stime = null;
        throw new Error(e);
      }
    }
  }

  keys() {
    return Object.keys(this.store);
  }

  removeItem(key) {
    this.store.delete(String(key));
  }

  clear() {
    this.store.clear();
  }

  get length() {
    return this.store.size;
  }
}

测试代码（vue代码）

let _this = this;

let time = null;

this.mockLocalstorage.setItem("name", "duya", 0.01);

console.log(this.mockLocalstorage.getItem("name")); // 测试mockLocalstorage duya

// 检测数据又没有清空

Answer 2

搞不懂啊

Answer 3

用 cookie 模拟 localStorage

参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\s*)" + escape(sKey).replace(/[-.+*]/g, "\
amp;") + "\s*\=\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) {
      return unescape(document.cookie.replace(/s*=(?:.(?!;))*$/, "").split(/s*=(?:[^;](?!;))*[^;]?;s*/)[nKeyId]);
    },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      this.length = document.cookie.match(/=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) {
      return (new RegExp("(?:^|;\s*)" + escape(sKey).replace(/[-.+*]/g, "\
amp;") + "\s*\=")).test(document.cookie);
    }
  };
  window.localStorage.length = (document.cookie.match(/=/g) || window.localStorage).length;
}

扩展 localStorage 支持 expires

(function () {
  var getItem = localStorage.getItem.bind(localStorage)
  var setItem = localStorage.setItem.bind(localStorage)
  var removeItem = localStorage.removeItem.bind(localStorage)
  localStorage.getItem = function (keyName) {
    var expires = getItem(keyName + '_expires')
    if (expires && new Date() > new Date(Number(expires))) {
      removeItem(keyName)
      removeItem(keyName + '_expires')
    }
    return getItem(keyName)
  }
  localStorage.setItem = function (keyName, keyValue, expires) {
    if (typeof expires !== 'undefined') {
      var expiresDate = new Date(expires).valueOf()
      setItem(keyName + '_expires', expiresDate)
    }
    return setItem(keyName, keyValue)
  }
})()

使用

localStorage.setItem('key', 'value', new Date() + 10000) // 10 秒钟后过期
localStorage.getItem('key')

Answer 4

定时器没有清除呢

Answer 5

		const localStorageMock = (function() {
			let store = {}
			return {
				getItem: function(key) { return store[key] || null },
				setItem: function(key, value, time) { // time 是毫秒级别,过时时间必须大于0ms
					time = Number(time)?time:0;
					store[key] = value.toString()
					if(time>0){this.timeOut(key,time)}
				},
				timeOut:function(key,time){
					let that = this;
					let timer = setTimeout(function(){ that.removeItem(key);clearTimeout(timer);},time)
				},
				removeItem: function(key) { delete store[key] },
				clear: function() { store = {} },
			}
		})()

		Object.defineProperty(window, 'localStorage2', {
			value: localStorageMock
		})
		
		
		localStorage2.setItem('test',"test",3000)
		console.log(localStorage2.getItem("test"))  //test
		
		setTimeout(function(){
			console.log(localStorage2.getItem("test"))  //null
		},4000);

Answer 6

// 模拟实现一个 localStorage
const localStorage = (function(){
let store = {};
return {
getItem(key){
if(store[key] && store[key+'time']){
const date = new Date().valueOf();
if(date>store[key+'time']){ // 过期了
this.removeItem(key);
return '已经过期了';
}
}
return store[key] || null;
},
setItem(key,value,time){
store[key] = value.toString();
if(time)store[key+'time'] = time; // 设置过期时间
},
removeItem(key){
delete store[key]
},
clear(){
store = {};
}
}
})()