我封装了一个JS通用的缓存管理对象，可以提供缓存的设置，读取，移除，清空操作，使用也很方便，封装方法的代码在最下方。
Q: 为什么不直接用原生的缓存方法，要封装？
A1:原生的缓存管理起来并不方便，这里设置一个，那里设置一个，设置的缓存多了以后，没有办法统一管理，并且读取的时候还需要使用JSON.parse才能读取对象；
A2:在我封装的缓存中，加入了模块的管理，例如user模块的缓存，专门放到user模块去维护，应用全局的缓存专门放到应用中维护；
A3:加入了字典说明，注释了每个模块的作用和属性，示例：
字典说明：
user 用户信息模块
-userToken 用户唯一标识
-userName 用户昵称
-userInfo 用户详细信息
app 全局模块
-source 进入应用的来源标识
-enterTime 进入应用的时间戳
如果我想清空用户模块user中的所有属性，调用 this.$KsStorage.remove('user') 就可以，不会影响到其它的缓存数据，也支持只清空某个模块的其中一个对象或者属性，例如 user 的 userToken ,调用 this.$KsStorage.remove('user','userToken') 就可以。
下面我们看看封装的说明。
封装JS缓存
入参字段说明：
group 模块分组 必填
key 模块指定字段 非必填
value 模块指定字段的值 非必填
使用示例：
1、设置user模块的 userInfo 对象到缓存
this.$KsStorage.set('user','userInfo',{name:1,head:2})2、获取user模块的所有缓存或者获取 user 模块的的 userInfo 属性
this.$KsStorage.get('user') or this.$KsStorage.get('user','userInfo')3、移除 user 模块的所有缓存或者移除 user 模块的的 userInfo 属性
this.$KsStorage.remove('user') or this.$KsStorage.remove('user','userInfo')4、清空所有缓存
this.$KsStorage.clear()封装的 ksStorage.js 完整代码：
vue,html,uniapp,react 都可以用此封装方法，统一管理应用的本地缓存
/**
缓存管理: 所有的缓存模板分组和字段说明都在本文件添加注释
字段说明：
group, 模块分组，必填
key, 模块指定字段，非必填
value, 模块指定字段的值，非必填
使用示例：
设置user模块的userInfo到缓存
this.$KsStorage.set('user','userInfo',{name:1,head:2})
获取user模块的所有缓存或者获取user模块的的userInfo属性
this.$KsStorage.get('user') or this.$KsStorage.get('user','userInfo')
移除user模块的所有缓存或者移除user模块的的userInfo属性
this.$KsStorage.remove('user') or this.$KsStorage.remove('user','userInfo')
清空所有缓存
this.$KsStorage.clear()
**/
let KsStorage ={
set:(group,key,value)=>{
let obj =JSON.parse(localStorage.getItem(group))||{};
obj[key] = value;
localStorage.setItem(group, JSON.stringify(obj));
},
get:(group,key)=>{
let obj = JSON.parse(localStorage.getItem(group))||{};
return key?obj[key]:obj;
},
remove:(group,key)=>{
if(key){
let obj =JSON.parse(localStorage.getItem(group))||{};
delete obj[key];
localStorage.setItem(group, JSON.stringify(obj));
}else{
localStorage.removeItem(group);
}
},
clear:()=>{
localStorage.clear();
},
}
export default KsStorage;感觉还不错的话请点个收藏加点赞吧~ 谢谢~
