JS封装本地缓存的设置，读取，移除，清空方法及使用示例

我封装了一个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;

感觉还不错的话请点个收藏加点赞吧~ 谢谢~