LocalStorage封裝一次解決方法示例

Posted on by

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

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

總結

封裝之後的結構

這樣封裝的好處

  • 調用起來方便，不會像沒有封裝之前笨重
  • 管理起來簡單，對於存儲的東西一目瞭然
  • 可以自定義解決一些問題，比如如果同一域名下項目使用同一字段導致的沖突，可以直接在storage封裝的get與set方法中添加項目的標識

以上就是LocalStorage封裝一次解決的詳細內容，更多關於LocalStorage封裝的資料請關註WalkonNet其它相關文章！

推薦閱讀：