ts封裝localStorage和sessionStorage

ts封裝localStorage和sessionStorage

我們經常需要在 localStorage 或者 sessionStorage 去持久化存儲值，但是 localStorage 和 sessionStorage 提供的 api 在處理對象的時候，往往需要 stringify 去轉成字符串去存儲，再通過 parse 去轉換回來，這樣是比較麻煩的，我們就可以將這些操作封裝成函數去調用

const useStorage = ($storage) => {
  /**
   * 根據 key 值獲取儲存在 storage 中的值
   * @param key storage key
   */
  const get = (key: string) => {
    let value = $storage.getItem(key);
    try {
      value = JSON.parse(value);
      return value;
    } catch {
      return value;
    }
  }

  /**
   * 根據 key 值向 storage 中儲存值
   * @param key storage key
   * @param value 需要儲存在 storage 中的值
   */
  const set = (key: string, value: any) => {
    return $storage.setItem(key, value ? JSON.stringify(value) : value);
  }

  /**
   * 根據 key 值移除儲存在 storage 中的值
   * @param key storage key
   */
  const remove = (key: string) => {
    return $storage.removeItem(key);
  }

  /**
   * 移除除了 key 之外的所有儲存在 storage 中的值
   * @param key storage key
   */
  const clearExcept = (key: string) => {
    for (let i = 0; i < $storage.length; i++) {
      const itemKey: string | undefined = $storage.key(i);
      if (itemKey && itemKey !== key) {
        $storage.removeItem(itemKey);
      }
    }
  }

  /**
   * 移除所有儲存在 storage 中的值
   */
  const clearAll = () => {
    for (const itemKey in $storage) {
      if (itemKey) {
        $storage.removeItem(itemKey);
      }
    }
  }

  return {
    get,
    set,
    remove,
    clearExcept,
    clearAll,
  }
}

const SessionStorageService = useStorage(window.sessionStorage || sessionStorage)
const LocalStorageService = useStorage(window.localStorage || localStorage)

export {
  SessionStorageService,
  LocalStorageService,
}

上面就是封裝的 useStorage 函數，可以同時支持 localStorage 和 sessionStorage，相比於原生的 setItem、getItem 和 removeItem 增加了 clearExcept 和 clearAll 兩個函數，如果你有更多的需求，可以基於此函數再增加 api ，如果有寫的不好的地方，歡迎在下方留言討論交流