封装localStorage 支持设置过期时间

3,017 阅读1分钟

因为localStorage是永久存储的,不支持设置过期时间,而我们有时又不希望把本地的存储一起发往服务器,所以也不会使用cookie,基于这样的业务场景,就对localStorage进行了二次封装,让它具备过期时间的特点。

class Storage {
  constructor (express) {
    this.express = express;
  }
  set(key, value, express) {
    let obj = {
      data: value,
      cTime: Date.now(),
      express: express || this.express
    };
    localStorage.setItem(key, JSON.stringify(obj));
  }
  get(key) {
    let item = localStorage.getItem(key);
    if (!item) {
      return null;
    }
    item = JSON.parse(item);
    let nowTime = Date.now();
    if (item.express && item.express < (nowTime - item.cTime)) {
      this.remove(key);
      return null;
    } else {
      return item.data;
    }
  }
  remove(key) {
    localStorage.removeItem(key);
  }
  clear(){
    localStorage.clear();
  }
}

使用上既可以在生成实例的时候统一设置过期时间,又能在设置某一个具体的值时再传入过期时间,肥肠的方便^_^

const storage1 = new Storage(24*60*60*1000);
storage1.set('name', 'nan');
storage1.set('age', 18, 60*1000);
const storage2 = new Storage();
storage2.set('age', 18, 60*1000);