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

原创

已于 2025-03-04 17:53:21 修改 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-10-08 17:26:28 首次发布

本文介绍了一种封装浏览器Storage API的方法，包括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() // 保存时间