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)行存儲(chǔ)

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

del方法和 clear方法刪除存儲(chǔ)

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

2. 使用的封裝

這個(gè)時(shí)候需要先新建一個(gè)constants文件用來(lái)保存存儲(chǔ)的字段

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

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

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

這個(gè)時(shí)候我們調(diào)用起來(lái)就會(huì)很方便了只需要在邏輯處寫上

userManage.getUserInfo()

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

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

3. 清除

場(chǎng)景：在用戶退出登錄的時(shí)候，有些存儲(chǔ)是需要清除，而有些存儲(chǔ)是不需要清除的。

方案：新建一個(gè)longStorageKeys文件，在constants基礎(chǔ)之上長(zhǎng)久保存內(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 {
  // 清除所有的存儲(chǔ)
  static clearLocalStorage() {
    storage.clear();
  }
  // 清除部分存儲(chǔ)
  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)用

clearStorageManage.clearLocalStorage()

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

總結(jié)

封裝之后的結(jié)構(gòu)

這樣封裝的好處

調(diào)用起來(lái)方便，不會(huì)像沒(méi)有封裝之前笨重
管理起來(lái)簡(jiǎn)單，對(duì)于存儲(chǔ)的東西一目了然
可以自定義解決一些問(wèn)題，比如如果同一域名下項(xiàng)目使用同一字段導(dǎo)致的沖突，可以直接在storage封裝的get與set方法中添加項(xiàng)目的標(biāo)識(shí)

以上就是LocalStorage封裝一次解決的詳細(xì)內(nèi)容，更多關(guān)于LocalStorage封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: