缓存里的天荒地老：封装公共storage，优雅的使用缓存

在前端项目中，我们经常需要用到缓存机制来提高性能。sessionStorage和localStorage是两种常用的缓存机制，但它们的使用方式并不总是很方便。因此，我们可以封装一个公共storage来简化对sessionStorage和localStorage的使用。

封装公共storage

首先，我们定义一个config对象，包含storage的类型、缓存的前缀、过期时间等信息。

const config = {
  type: 'sessionStorage', // 缓存类型，可以是'sessionStorage'或'localStorage'
  prefix: 'cache_', // 缓存前缀，用于区分不同的缓存
  expire: 3600 // 过期时间，单位是秒
};

然后，我们定义一个公共storage类，该类接受config对象作为参数。

class Storage {
  constructor(config) {
    this.config = config;
    this.storage = config.type === 'sessionStorage' ? sessionStorage : localStorage;
  }

  // 设置缓存
  set(key, value) {
    const data = JSON.stringify({
      value,
      expire: Date.now() + this.config.expire * 1000
    });
    this.storage.setItem(this.config.prefix + key, data);
  }

  // 获取缓存
  get(key) {
    const data = this.storage.getItem(this.config.prefix + key);
    if (!data) {
      return null;
    }

    const { value, expire } = JSON.parse(data);
    if (expire < Date.now()) {
      this.remove(key);
      return null;
    }

    return value;
  }

  // 移除缓存
  remove(key) {
    this.storage.removeItem(this.config.prefix + key);
  }

  // 清空缓存
  clear() {
    this.storage.clear();
  }
}

最后，我们可以实例化公共storage类并使用它来操作缓存。

const storage = new Storage(config);

storage.set('user', { name: 'John', age: 20 });

const user = storage.get('user');

console.log(user); // { name: 'John', age: 20 }

storage.remove('user');

storage.clear();

优雅的使用缓存

在项目中使用公共storage时，我们可以采用以下优雅的方式：

1. 在组件的钩子函数中使用公共storage。例如，在组件的mounted钩子函数中，我们可以从公共storage中获取数据并将其渲染到页面上。
2. 在服务中使用公共storage。例如，在服务的方法中，我们可以将数据保存到公共storage中，以便下次使用时可以从公共storage中获取数据，而无需再次请求服务器。
3. 在指令中使用公共storage。例如，在指令中，我们可以将数据保存到公共storage中，以便下次使用时可以从公共storage中获取数据，而无需再次请求服务器。

使用公共storage可以让我们在项目中更加优雅地使用缓存，从而提高项目的性能。