LocalStorage封裝一次解決方法示例

更新時間：2022年07月04日 17:34:46 作者：Fave

這篇文章主要為大家介紹了LocalStorage封裝一次解決的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 封裝基礎(chǔ)的方法

首先對于localStorage做一個基礎(chǔ)的封裝，封裝出 get 、set 、del 這幾個基本的方法。這一步是方便后續(xù)的調(diào)用

新建一個storage文件

const storage = {
   get(key) {
      if (!key) {
          return null
      }
      key = key.toString();
      const data = window.localStorage.getItem(key);
      return JSON.parse(data);
   },
}

get方法首先判斷key的值，再轉(zhuǎn)換成字符串進(jìn)行取值，最后再將返回的值使用JSON.parse進(jìn)行解析即可

const storage = {
  set(key, value) {
    if (!key || !value) {
          return null
      }
    key = key.toString();
    window.localStorage.setItem(key, JSON.stringify(value));
  },
}

set方法判斷不為空的情況下，將key轉(zhuǎn)換字符串，再進(jìn)行存儲

const storage = {
  deleteKey(key: string) {
    if (!key) {
      return;
    }
    key = key.toString();
    window.localStorage.removeItem(key);
  },
  clear() {
    window.localStorage.clear();
  }
}

del方法和 clear方法刪除存儲

這一步就是對localtorage做好了一個基礎(chǔ)的封裝

2. 使用的封裝

這個時候需要先新建一個constants文件用來保存存儲的字段

const constants = {
  USER_INFO: 'user_info',
  USER_MESSAGE: 'user_message',
}
export default constants;

封裝一個用戶相關(guān)的存儲

// 引入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;

這個時候我們調(diào)用起來就會很方便了只需要在邏輯處寫上

userManage.getUserInfo()

這樣就可以直接獲取到存儲的用戶信息的內(nèi)容，設(shè)置刪除也可以直接調(diào)用

userManage.setUserInfo({name: 'yonghu'}) / userManage.delUserInfo();

3. 清除

場景：在用戶退出登錄的時候，有些存儲是需要清除，而有些存儲是不需要清除的。

方案：新建一個longStorageKeys文件，在constants基礎(chǔ)之上長久保存內(nèi)容

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 =&gt; {
      if (!long_keys.includes(key)) {
        window.localStorage.removeItem(key);
      }
    });
    return;
  }
}
export default clearStorageManage;

方法調(diào)用