这篇文章主要介绍“LocalStorage如何封装一次”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“LocalStorage如何封装一次”文章能帮助大家解决问题。
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 和 constantsimport 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()
可以扩展其他的清除，比如切换用户之后哪些需要/不需要的
关于“LocalStorage如何封装一次”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
