前端缓存处理

在开发过程中，总有一些使用频率很高的接口，数据内容还不基本不修改的数据。为了提高效率，自然要放到缓存中。

后端将数据放入redis，那么前端放到哪呢？

通常的选择是localStorage、sessionStorage中。

1.前端的缓存位置区别：

简单说明，详细区别可自行百度。

localStorage：永久保存，浏览器关闭也不会消失。除非手动清除数据。

sessionStorage：暂时保存，缓存的数据时间是会话级别的。不会永久保存。

2.js工具类代码：

/** * 根据字典编码获取字典数据 * 注意：此方法是异步方法，需要用.then(res => {})获取返回值 * @param {string} code 字典编码 * @returns 字典数据 */
async getCodeList(code) { 
   
  let codeList = sessionStorage.getItem(code);
  // 校验这个数据是否可用
  if (StringUtil.isEmpty(codeList)) { 
   
    // 此处同步调用接口，是防止方法已经结束了，但是数据还没获取到。（这里使用await，方法就必须是async修饰的）
    await sysCode.itemCodes({ 
   code: code}).then((res) => { 
   
      // 存数据时都需要用JSON进行转换。
      sessionStorage.setItem(code, JSON.stringify(res));
      codeList = JSON.stringify(res);
    })
  }
  return JSON.parse(codeList);
},

/** * 根据字典编码和字典数据的id获取该字典数据的名称 * 注意：调用此方法的位置要确保当前系统已经调用过同文件中的getCodeList方法，并且code一致 * @param {string} code 字典编码 * @param {number} id 字典数据的id * @returns {String} 字典数据的名称 */
getCodeName(code, id) { 
   
  id = parseInt(id);
  let codeList = sessionStorage.getItem(code);
  return JSON.parse(codeList).filter(e => e.valueId === id)[0].valueName;
},

Jetbrains全家桶1年46，售后保障稳定

3.页面中的使用：

/** * 获取下拉框数据 */
select() { 
   
  // 异步方法需要使用.then()获取数据
  sysCodeUtil.getCodeList("type").then(res => { 
   
    this.type = res;
  })
},

// 此处粘一行代码说明getCodeName的使用
res.data.type = sysCodeUtil.getCodeName("type", res.data.type);

使用时根据具体使用环境具体选择放到sessionStorage中还是localStorage中，我这里是放到了sessionStorage中。

我是做java的，js并不是非常熟悉，把这个方案想出来用了一两天的时间。

最开始没有这个方法并没有加异步，写完了这个工具类之后发现系统第一次调用的时候，方法已经结束了但是没有获取到值。

sessionStorage中也有值，就是返回值没有数据。后来发现是调用接口的时候异步执行，方法结束后才会调用接口。（最开始不太明白js的异步执行规则，后来才知道的）

加上异步之后就可以解决这个问题了，调用的时候会把数据获取到再返回。

我这里是这样做的，我感觉不是最优解，但是我只想到了这种方式，有大佬有更好的方式欢迎在评论区评论！

有什么问题，也欢迎在评论区留言！

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/206690.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...