LocalStorage封装一次解决方法示例 LocalStorage封装一次解决方法示

1. 封装基础的方法
2. 使用的封装
3. 清除
总结

1. 封装基础的方法首先对于localStorage做一个基础的封装，封装出 get 、set 、del 这几个基本的方法。这一步是方便后续的调用
新建一个storage文件

const storage = {get(key) {if (!key) {return null}key = key.toString(); const data = https://www.it610.com/article/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;

【LocalStorage封装一次解决方法示例】方法调用