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

发布时间:2024年01月18日

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

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

?

文章来源:https://blog.csdn.net/qq_35713752/article/details/135673322
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。