封装localStorage，支持切换存储引擎 sessionStorage，支持vue hook方式调用

封装storage存储class

// MyStorage.ts
export enum StorageType {
  session = 'session',
  local = 'local'
}
export class MyStorage {
  /** 存储key值前缀 */
  private prefix: string
  /** 单例的实例 */
  private static _instance: Map<string, MyStorage>
  private storage: Storage
  private engine = {
    [StorageType.session]: sessionStorage,
    [StorageType.local]: localStorage
  }
  // 单例模式
  constructor(prefix = '', type: StorageType = StorageType.local) {
    this.prefix = prefix
    this.storage = this.engine[type]
    if (!this.storage) {
      throw new Error("engine type error. it must be 'session','local'")
    }
    if (!MyStorage._instance) {
      MyStorage._instance = new Map()
    }
    if (!MyStorage._instance?.has(type)) {
      MyStorage._instance.set(type, this)
    }
    return MyStorage._instance.get(type) as MyStorage
  }

  private getFullKey(value: string) {
    return this.prefix + value
  }
  /**
   *
   * @param key
   * @param value
   * @param expire 过期时间，单位秒，默认0，永不过期
   * @returns
   */
  set(key: string, value: any, expire = 0) {
    try {
      const wrapData = {
        value,
        expire,
        time: Date.now() // 保存时间
      }
      const data = JSON.stringify(wrapData)
      this.storage.setItem(this.getFullKey(key), data)
      return true
    } catch (error) {
      console.error(error)
      return false
    }
  }
  /**
   * 追加对象保持
   * @param key
   * @param value
   * @param expire
   * @returns
   */
  setInto(key: string, value: Record<string, any>, expire = 0) {
    try {
      const preData = this.get(key)
      const wrapData = {
        value,
        expire,
        time: Date.now() // 保存时间
      }
      if (preData) {
        Object.assign(wrapData.value, preData, value)
      }
      const data = JSON.stringify(wrapData)
      this.storage.setItem(this.getFullKey(key), data)
      return true
    } catch (error) {
      console.error(error)
      return false
    }
  }
  /**
   * 获取值
   * @param key
   * @returns
   */
  get(key: string) {
    try {
      const localData = this.storage.getItem(this.getFullKey(key))
      if (localData === null) return localData
      const data = JSON.parse(localData)
      if (data.expire > 0 && Date.now() - data.time > data.expire * 1000) {
        // js时间戳是ms，13位数
        this.remove(key)
        return null
      }
      return data.value
    } catch (error) {
      console.error(error)
      return null
    }
  }
  /**
   *  remove a value of key
   * @param key
   */
  remove(key: string) {
    this.storage.removeItem(this.getFullKey(key))
  }

  /**
   * clear all value of the prefix key
   */
  clear(): void {
    Object.keys(this.storage).forEach(key => {
      if (key.startsWith(this.prefix)) {
        this.storage.removeItem(key)
      }
    })
  }
}

封装 vue hook

// @/hook/useStorage.ts
import { MyStorage, StorageType } from 'MyStorage.ts'
import { ref} from 'vue'

export const useStorage = (key: string, prefix = 'test_', type = 'local') => {
  const storageHandle = new MyStorage(prefix, type as StorageType)

  const value = ref(storageHandle.get(key))
  const setValue = (storage: any) => {
    return (newValue: any) => {
      value.value = newValue
      storage.set(key, newValue)
    }
  }
  return [value, setValue(storageHandle), storageHandle]
}

升级 useStorage 方法，方法重载

1. useStoreage() 不传参数，返回 MyStorage实例
2. useStorage() 传参则按参数返回使用

import { MyStorage, StorageType } from '@/utils/localStorage'
import { ref } from 'vue'
import type { Ref } from 'vue'

type returnTuple = [Ref, (value: any, expire?: number) => void, MyStorage]
export function useStorage (): MyStorage
export function useStorage (key: string): returnTuple
export function useStorage (key: string, perfix: string): returnTuple
export function useStorage (key: string, prefix: string, engine: StorageType): returnTuple
export function useStorage (
  key?: string,
  prefix = 'visionnav_scene_',
  engine = StorageType.local
) {
  const storageHandle = new MyStorage(prefix, engine as StorageType)
  if (typeof key === 'undefined') {
    return storageHandle as MyStorage
  }
  const fullKey = key
  const value = ref(storageHandle.get(fullKey))
  const setValue = (storage: any) => {
    return (newValue: any, expire = 0) => {
      value.value = newValue
      storage.set(fullKey, newValue, expire)
    }
  }
  return [value, setValue(storageHandle), storageHandle]
}

vue中使用

<script setup lang="ts">
import {useStorage} from '@/hook/useStorage'
onMounted(() => {
  let [value2, setValue2, b] = useStorage('b', 'prefix_')
  let [value3, setValue3, c] = useStorage('c', 'prefix_')
  let [value, setValue, a] = useStorage('a', 'test2_', 'session')
  console.log('c === b', b === c)
  console.log('storage1', value)
  console.log('storage2', value2)
  setValue({
    age: 18,
    name: 'lili',
    famary: {
      p1: '11',
      p2: '22',
    }
  })
  setValue2({
  b: 'bb'
  })
  setTimeout(() => {
    setValue3({
      c: 'after fetch save'
    })
    console.log('set storage1', value)
    console.log('set storage2', value2)
    console.log('set storage3', value3)
  }, 3000)
})
</script>