Storage：本地存储

统一管理策略

背景

• 防止项目过度使用本地存储，key 名重复导致浏览器全局污染
• 原生语法，耦合度较高，后期更新本地存储方式成本较高
• 统一管理，更加合理的使用 Storage 的空间
• 本文会从方法/数据两个方面展开

方法

不涉及具体业务，仅统一管理存储/取值的方法。

class CacheManager {
  constructor(storage) {
    this.storage = storage;
  }

  setItem(key, value) {
    this.storage.setItem(key, JSON.stringify(value));
  }

  getItem(key) {
    const value = this.storage.getItem(key);
    return value ? JSON.parse(value) : null;
  }

  removeItem(key) {
    this.storage.removeItem(key);
  }
}

const localStorageManager = new CacheManager(localStorage);
const sessionStorageManager = new CacheManager(sessionStorage);

// 使用示例
localStorageManager.setItem('username', 'John');
const username = localStorageManager.getItem('username');
console.log(username); // 输出：John

数据

随版本更新

在具体业务中会有本地存储随着版本迭代一起更新的场景，此时即需要维护一份存储列表。当项目版本升级时，可以读取本地配置文件或者远程从数据库中获取对应的版本的 key 列表。然后，遍历列表，更新对应的 Storage 存储项。

本地维护配置文件

{
  "version": "1.0.0",
  "storageKeys": [
    "key01",
    "key02",
    "key03"`
  ]
}

远程获取（数据库）

实现

const version = "1.0.0"; // 当前软件版本号
const storageKeys = ["key1", "key2"]; // 从配置文件或数据库中获取本地存储的 key 列表

storageKeys.forEach(key => {
  // 具体操作，可更新/可删除
});

设置有效时间

在具体业务中可能会存在需要记录用户行为的场景，但是会根据距离上一次操作的时长来决定当前存储的用户行为是否有效，因为业务会随着版本迭代而更新。

实现

// 存储结构
preValues: {
  time01: {},
  time02: {},
  ...
}

const currLocalKey = Date.now();
let preValues = JSON.parse(localStorage.getItem('preValues') || '{}');
// 清除过期存储,暂设有效时间是 `1天`
// 当然，此处也可以设置定时删除
Object.keys(preValues).forEach(item => {
  if ((Date.now() - item) > (24 * 60 * 60 * 1000)) {
    delete preValues[item];
  }
});
preValues[currLocalKey] = '当前需要被存储的值';
localStorage.setItem('preValues', JSON.stringify(preValues));

总结

这里是从方法与数据两个维度展开，若需要可自行结合哈。当然，根据需求场景的多样性，各式各样的策略层出不穷。比如当本地存储数据量较大且不适合其它存储方式时，就需要对 Storage 的空间大小进行管理，如删除时间最为久远的存储等，增强其健壮性。仅供参考交流哈。