vue封装localStorage和sessionStorage全局使用

新建storage.js文件。

const ls = localStorage
const ss = sessionStorage
const db = {
  ls: {
    get (key) {
      try {
        return JSON.parse(ls.getItem(key))
      } catch (err) {
        return ls.getItem(key)
      }
    },
    set (key, value) {
      ls.setItem(key, JSON.stringify(value))
    },
    remove (key) {
      ls.removeItem(key)
    },
    clear () {
      ls.clear()
    }
  },
  ss: {
    get (key) {
      try {
        return JSON.parse(ss.getItem(key))
      } catch (err) {
        return ss.getItem(key)
      }
    },
    set (key, value) {
      ss.setItem(key, JSON.stringify(value))
    },
    remove (key) {
      ss.removeItem(key)
    },
    clear () {
      ss.clear()
    }
  }

在main.js中引入，全局注册

import db from "./utils/storage.js
const app = createApp(App)
app.mount('#app')app.config.globalProperties.$db = db

需要使用sessionStorage时直接在组件中，localStorage同

this.$db.ss.get(key); // 读取值
this.$db.ss.set('key',value) // 存储值

记录一下