vue本地存储

Vue.js 支持使用浏览器提供的本地存储 API 来存储数据，包括 localStorage 和 sessionStorage。

localStorage 和 sessionStorage 都是浏览器提供的本地存储机制，可以用于在客户端存储简单的键值对数据。它们的区别在于：

- localStorage 存储的数据没有过期时间，只能通过代码或用户手动清除。
- sessionStorage 存储的数据在用户关闭浏览器窗口后就会被自动清除。

在 Vue.js 中，可以使用 $store 对象来访问本地存储，具体步骤如下：

1. 在组件中引入 Vue.js 的 createNamespacedHelpers 方法：

import { createNamespacedHelpers } from 'vuex'
const { mapActions, mapGetters } = createNamespacedHelpers('module')

2. 在组件中使用 mapGetters 和 mapActions 方法来获取和修改本地存储中的数据：

computed: {
  ...mapGetters(['getLocalStorageItem'])
},
methods: {
  ...mapActions(['setLocalStorageItem']),
  saveData() {
    this.setLocalStorageItem({ key: 'data', value: this.data })
  }
}

3. 在 store 中定义对应的 action 和 getter 方法：

const state = {}

const getters = {
  getLocalStorageItem(state) {
    return (key) => {
      return JSON.parse(localStorage.getItem(key))
    }
  }
}

const actions = {
  setLocalStorageItem({ commit }, { key, value }) {
    localStorage.setItem(key, JSON.stringify(value))
  }
}

export default {
  state,
  getters,
  actions
}

通过以上步骤，就可以在 Vue.js 中方便地使用本地存储 API 存储和获取数据了。需要注意的是，存储到本地存储中的数据必须是 JSON 格式的字符串，所以需要使用 JSON.stringify 和 JSON.parse 方法进行转换。