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 ，如果有写的不好的地方，欢迎在下方留言讨论交流