vue sessionStorage 生产环境用不了

在 Vue 中，sessionStorage 是浏览器提供的 Web Storage API，用于在当前会话期间存储数据。但是在生产环境中，由于浏览器的安全策略限制，无法直接访问 sessionStorage。

解决这个问题的一种常见方法是使用插件或库来模拟 sessionStorage 的功能。例如，你可以使用 vue-web-storage 插件，在生产环境中使用 LocalStorage 进行替代。

首先，安装 vue-web-storage 插件：

npm install vue-web-storage

然后，在 main.js 文件中引入和使用插件：

import Vue from 'vue'
import VueWebStorage from 'vue-web-storage'

Vue.use(VueWebStorage, {
  prefix: 'app_', // 为存储的数据设置前缀，以避免与其他应用冲突
  storage: 'local', // 在生产环境中使用 LocalStorage
})

new Vue({
  // ...
}).$mount('#app')

现在，你可以在 Vue 组件中使用 `$localStorage` 对象访问本地存储（包括 sessionStorage）：

<template>
  <div>
    <button @click="saveData">保存数据</button>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveData() {
      this.$localStorage.set('key', 'value')
    },
    getData() {
      const data = this.$localStorage.get('key')
      console.log(data)
    },
  },
}
</script>

现在，你可以在生产环境中使用 `$localStorage` 对象来模拟 sessionStorage 的功能了。