sessionStorage和localStorage的封装 typescript+vue3

在写项目的时候，需要储存一些东西为页面之间数据传递，第一个想到的就是vuex，但是你会发现有时候页面刷新一下存在vuex里面的数据就会丢失。

import {
          
    createStore } from vuex


export default createStore({
          
   
  state: {
          
   
    
  },
  mutations: {
          
   
  },
  actions: {
          
   
  },
  modules: {
          
   
    
  }
})

HTML5的WebStorage提供了两种API localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage只存在于当前会话页面，当会话结束后，数据也随之销毁，在不同的浏览器窗口中共享。也就是存在于当前浏览器页面，页面关闭，数据也会删除。（注意：通过鼠标右键打开的新标签无法共享sessionStorage）

sessionStorage和localStorage他们均只能存储字符串类型的对象 所以你不可能每次储存的时候都去转化一次，那样会很麻烦的，也不好管理

所以自己就封装一个类使用HTML5的WebStorage提供了两种API 最后再实例化

在/utils/storage/index.ts

interface strorageFunType{
          
   
    getItem(key:string):any;
    setItem(key:string,value:string):void;
    removeItem(key:string):void;
    clear():void;
}

// sessionStorage  因为每次进行对象存储的时候要进行转化就很麻烦，所以每次就封装函数直接调用
class sessionStorageProxy implements strorageFunType{
          
   
    private storage:strorageFunType;
    constructor (storageModel:strorageFunType){
          
   
        this.storage=storageModel;
    }
    getItem(key: string):any {
          
   
       return JSON.parse(this.storage.getItem(key))||null
    }
    setItem(key: string, value: string): void {
          
   
         this.storage.setItem(key,JSON.stringify(value))
    }
    removeItem(key: string): void {
          
   
       this.storage.removeItem(key)
    }
    clear(): void {
          
   
       this.storage.clear();
    }

    
}
// 本地储存也一样，只要继承一次就行
class localStorageProxy extends sessionStorageProxy implements strorageFunType{
          
   
    constructor(localStorage:strorageFunType){
          
   
        super(localStorage)
    }

}

export const storageSession = new sessionStorageProxy(sessionStorage);//调用系统的session
export const storageLocal= new localStorageProxy(localStorage)