LocalStorage如何封装一次

这篇文章主要介绍“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如何封装一次”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。