我要评论1. 封装基础的方法
首先对于localstorage做一个基础的封装，封装出 get 、set 、del 这几个基本的方法。这一步是方便后续的调用
新建一个storage文件
const storage = {
get(key) {
if (!key) {
return null
}
key = key.tostring();
const data = window.localstorage.getitem(key);
return json.parse(data);
},
}
get方法首先判断key的值，再转换成字符串进行取值，最后再将返回的值使用json.parse进行解析即可
const storage = {
set(key, value) {
if (!key || !value) {
return null
}
key = key.tostring();
window.localstorage.setitem(key, json.stringify(value));
},
}
set方法判断不为空的情况下，将key转换字符串，再进行存储
const storage = {
deletekey(key: string) {
if (!key) {
return;
}
key = key.tostring();
window.localstorage.removeitem(key);
},
clear() {
window.localstorage.clear();
}
}
del方法 和 clear方法删除存储
这一步就是对localtorage做好了一个基础的封装
2. 使用的封装
这个时候需要先新建一个constants文件用来保存存储的字段
const constants = {
user_info: 'user_info',
user_message: 'user_message',
}
export default constants;
封装一个用户相关的存储
// 引入storage 和 constants
import storage from "../stroage";
import constants from "../constants";
class usermanage {
static readonly user_info = constants.user_info
// 暴露的获取用户信息的方法
static getuserinfo() {
return storage.get(usermanage.user_info);
}
static setuserinfo(value: unknown) {
storage.set(usermanage.user_info, value);
}
static deluserinfo() {
storage.deletekey(usermanage.user_info);
}
}
export default usermanage;
这个时候我们调用起来就会很方便了只需要在逻辑处写上
usermanage.getuserinfo()
这样就可以直接获取到存储的用户信息的内容，设置删除也可以直接调用
usermanage.setuserinfo({name: 'yonghu'}) / usermanage.deluserinfo();
3. 清除
场景：在用户退出登录的时候，有些存储是需要清除，而有些存储是不需要清除的。
方案：新建一个longstoragekeys文件，在constants基础之上长久保存内容
import constants from "./constants";
const longstoragekeys = {
user_info: constants.user_info,
}
export default longstoragekeys;
清除的封装
import storage from "./stroage";
import longstoragekeys from "./longstoragekeys";
class clearstoragemanage {
// 清除所有的存储
static clearlocalstorage() {
storage.clear();
}
// 清除部分存储
static incompletionclear() {
let long_keys = object.values(longstoragekeys);
let local_keys = object.values(window.localstorage);
local_keys.map(key => {
if (!long_keys.includes(key)) {
window.localstorage.removeitem(key);
}
});
return;
}
}
export default clearstoragemanage;
方法调用
clearstoragemanage.clearlocalstorage()
可以扩展其他的清除，比如切换用户之后哪些需要/不需要的
总结
封装之后的结构
这样封装的好处
- 调用起来方便，不会像没有封装之前笨重
- 管理起来简单，对于存储的东西一目了然
- 可以自定义解决一些问题，比如如果同一域名下项目使用同一字段导致的冲突，可以直接在storage封装的get与set方法中添加项目的标识
以上就是localstorage封装一次解决的详细内容，更多关于localstorage封装的资料请关注代码网其它相关文章！
发表评论