聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行「读,写, 删」操作, 但是相比于 cookie, localStorage 唯一美中不足的就是「不能设置每一个键的过期时间」。

    ❝ localStorage 属性允许我们访问一个 Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
    ❞
    我们还应注意，localStorage 中的键值对总是以字符串的形式存储。

    问题描述
    在实际的应用场景中, 我们往往需要让 localStorage 设置的某个 「key」 能在指定时间内自动失效, 所以基于这种场景, 我们如何去解决呢?

    1. 初级解法
      对于刚熟悉前端的朋友, 可能会立马给出答案:

      1. localStorage.setItem('dooring', '1.0.0')
      2. // 设置一小时的有效期
      3. const expire = 1000  60  60;
      4. setTimeout(() => {
      5. localStorage.setItem('dooring', '')
      6. }, expire)


      当然这种方案能解决一时的问题, 但是如果要设置任意键的有效期, 使用这种方案就需要编写多个定时器, 「维护成本极高, 且不利于工程化复用」。

    2. 中级解法
      前端工程师在有一定的工作经验之后, 往往会去考虑工程化和复用性的问题, 并对数据结构有了一定的了解, 所以可能会有接下来的解法:

    用「localStorage」存一份{key(键): expire(过期时间)}的映射表
    重写「localStorage API」, 对方法进行二次封装
    类似的代码如下:

    1. const store = {
    2. // 存储过期时间映射
    3. setExpireMap: (key, expire) => {
    4. const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}"
    5. localStorage.setItem(
    6. 'EXPIRE_MAP',
    7. JSON.stringify({
    8. ...JSON.parse(expireMap),
    9. key: expire
    10. }))
    11. },
    12. setItem: (key, value, expire) => {
    13. store.setExpireMap(key, expire)
    14. localStorage.setItem(key, value)
    15. },
    16. getItem: (key) => {
    17. // 在取值之前先判断是否过期
    18. const expireMap = JSON.parse(
    19. localStorage.getItem('EXPIRE_MAP') || "{}"
    20. )
    21. if(expireMap[key] && expireMap[key] < Date.now()) {
    22. return localStorage.getItem(key)
    23. }else {
    24. localStorage.removeItem(key)
    25. return null
    26. }
    27. }
    28. // ...
    29. }


    眨眼一看这个方案确实解决了复用性的问题, 并且不同团队都可以使用这个方案, 但仍然有一些缺点:

    对 store 操作时需要维护2份数据, 并且占用缓存空间
    如果 EXPIRE_MAP 误删除将会导致所有过期时间失效
    对操作过程缺少更灵活的控制(比如操作状态, 操作回调等)
    3. 高级解法
    为了减少维护成本和空间占用, 并支持一定的灵活控制和容错能力, 我们又应该怎么做呢?

    这里笔者想到了两种类似的方案:

    将过期时间存到 key 中, 如 dooring|6000, 每次取值时通过分隔符“|”来将 key 和 expire 取出, 进行判断
    将过期时间存到 value 中, 如 1.0.0|6000, 剩下的同1
    为了更具有封装性和可靠性, 我们还可以配置不同状态下的回调, 简单实现如下:

    1. const store = {
    2. preId: 'xi-',
    3. timeSign: '|-door-|',
    4. status: {
    5. SUCCESS: 0,
    6. FAILURE: 1,
    7. OVERFLOW: 2,
    8. TIMEOUT: 3,
    9. },
    10. storage: localStorage || window.localStorage,
    11. getKey: function (key: string) {
    12. return this.preId + key;
    13. },
    14. set: function (
    15. key: string,
    16. value: string | number,
    17. time?: Date & number,
    18. cb?: (status: number, key: string, value: string | number) => void,
    19. ) {
    20. let _status = this.status.SUCCESS,
    21. _key = this.getKey(key),
    22. _time;
    23. // 设置失效时间，未设置时间默认为一个月
    24. try {
    25. _time = time
    26. ? new Date(time).getTime() || time.getTime()
    27. : new Date().getTime() + 1000  60  60  24  31;
    28. } catch (e) {
    29. _time = new Date().getTime() + 1000 * 60  60  24 * 31;
    30. }
    31. try {
    32. this.storage.setItem(key, time + this.timeSign + value);
    33. } catch (e) {
    34. _status = this.status.OVERFLOW;
    35. }
    36. cb && cb.call(this, status, key, value);
    37. },
    38. get: function (
    39. key: string,
    40. cb?: (status: number, value: string | number | null) => void,
    41. ) {
    42. let status = this.status.SUCCESS,
    43. _key = this.getKey(key),
    44. value = null,
    45. timeSignLen = this.timeSign.length,
    46. that = this,
    47. index,
    48. time,
    49. result;
    50. try {
    51. value = that.storage.getItem(_key);
    52. } catch (e) {
    53. result = {
    54. status: that.status.FAILURE,
    55. value: null,
    56. };
    57. cb && cb.call(this, result.status, result.value);
    58. return result;
    59. }
    60. if (value) {
    61. index = value.indexOf(that.timeSign);
    62. time = +value.slice(0, index);
    63. if (time > new Date().getTime() || time == 0) {
    64. value = value.slice(index + timeSignLen);
    65. } else {
    66. (value = null), (status = that.status.TIMEOUT);
    67. that.remove(_key);
    68. }
    69. } else {
    70. status = that.status.FAILURE;
    71. }
    72. result = {
    73. status: status,
    74. value: value,
    75. };
    76. cb && cb.call(this, result.status, result.value);
    77. return result;
    78. },
    79. // ...
    80. };

    export default store;
    这样, 我们就实现了每个 key 都有独立的过期时间, 并且对不同的操作结果可以轻松的进行状态管控啦~

    1. 骨灰级解法
      当然, 骨灰级解法是直接使用 xijs 这个 javascript 工具库, 因为我已经将上述完整实现方案封装到该库中了, 我们只需要使用如下的方案, 就能轻松使用具有过期时间的强大的 「localStorage」 方法啦 :
    1. //  先安装 yarn add xijs
    2. import { store } from 'xijs';
    3. // 设置带有过期时间的key
    4. store.set('name', 'dooring', Date.now() + 1000);
    5. console.log(store.get('name'));
    6. setTimeout(() => {
    7. console.log(store.get('name'));
    8. }, 1000);
    9. // 设置成功后的回调
    10. store.set('dooring', 'xuxiaoxi', Date.now() + 1000, (status, key, value) => {
    11. console.log('success');
    12. });


    同时 xijs 还在持续扩充更有用的工具函数, 让业务开发更高效. 目前已集成了如下工具函数:

    「store」 基于 localStorage 上层封装的支持过期时间设置的缓存库, 支持操作回调
    「uuid」 生成唯一id, 支持设置长度
    「randomStr」 生成指定个数的随机字符串
    「formatDate」 开箱即用的时间格式化工具
    「debounce」防抖函数
    「throttle」 节流函数
    「url2obj」 将url字符串转换为对象
    「obj2url」 将对象转换成编码后的url字符串
    「isPC」 判断设备是否为PC类型
    github地址: https://github.com/MrXujiang/xijs

    文档地址: http://h5.dooring.cn/xijs/lib/store