在开发过程中,总有一些使用频率很高的接口,数据内容还不基本不修改的数据。为了提高效率,自然要放到缓存中。
后端将数据放入redis,那么前端放到哪呢?
通常的选择是localStorage、sessionStorage中。
1.前端的缓存位置区别:简单说明,详细区别可自行百度。
localStorage: 永久保存,浏览器关闭也不会消失。除非手动清除数据。
sessionStorage:暂时保存,缓存的数据时间是会话级别的。不会永久保存。
2.js工具类代码: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); }, getCodeName(code, id) { id = parseInt(id); let codeList = sessionStorage.getItem(code); return JSON.parse(codeList).filter(e => e.valueId === id)[0].valueName; },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的异步执行规则,后来才知道的)
加上异步之后就可以解决这个问题了,调用的时候会把数据获取到再返回。
我这里是这样做的,我感觉不是最优解,但是我只想到了这种方式,有大佬有更好的方式欢迎在评论区评论!
有什么问题,也欢迎在评论区留言!