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 和 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()

可以擴展其他的清除，比如切換用戶之后哪些需要/不需要的

關于“LocalStorage如何封裝一次”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。