写在前面

我写文章只是为了记录自己觉得比较有用的然后要是写的不好勿喷，谢谢

开箱即用

1. 首先用vite构建一个vue3的项目（不过多介绍了）
2. 在项目里面新建一个storage.ts文件
3. 在main.ts中引入挂载全局
4. 在页面中使用

1. 首先用vite构建一个vue3的项目（不过多介绍了）

npm init vue

需要什么就配置什么就不介绍了

2. 在项目里面新建一个storage.ts文件

class Storage {
  set(key: string, value: any, date?: string | number | undefined = 'permanent') {
    const data = {
      value,
      date
    }
    if (date != 'permanent') {
      let d = (new Date()).valueOf()
      data.date = d + date
    }
    localStorage.setItem(key, JSON.stringify(data))
  }
  get(key: string) {
    const value = localStorage.getItem(key)
    if (value) {
      const obj = JSON.parse(value)
      let d = (new Date()).valueOf()
      if (obj.date == 'permanent' || obj.date > d) {
        return {
          message: `获取成功`,
          value: obj.value
        }
      } else {
        this.remove(key)
        return {
          message: `您的${key}已过期`,
          value: null
        }
      }
    } else {
      return {
        message: `key值无效`,
        value: null
      }
    }
  }
  remove(key: string) {
    localStorage.removeItem(key)
  }
  clear() {
    localStorage.clear()
  }
}
export default new Storage()

3. 在main.ts中引入挂载全局

import { createApp } from 'vue'
import Storage from "./common/store/store"

import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$Storage = Storage//全局事件挂载

4. 在页面中使用

<template>
  <div @click="handleClick">获取</div>
</template>

<script setup lang="ts">
  const instance = getCurrentInstance(); //获取全局事件挂载
const app = instance?.appContext.config.globalProperties;
app.$Storage.set('key1',123,500)

const handleClick =()=>{
 let data =  app.$Storage.get('key')
}
</script>

<style scoped lang="less"></style>

5.写在最后

要是写的不好大家不要骂我，谢谢各位了