uniapp开发H5刷新网页导致本地localStorage数据清空问题

问题描述：使用uniapp开发H5网页时，结合uniapp的本地存储出现刷新时清空本地数据问题。

代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

//vuex结合uniapp的持久化存储
const vuexPersisted = new createPersistedState({
    storage: {
    	 getItem: key => uni.getStorageSync(key),
         setItem: (key, value) => uni.setStorageSync(key, value),
         removeItem: key => uni.clearStorageSync(key)
    }
})
export default new Vuex.Store({
  plugins: [vuexPersisted],
  state: {
    messageinfo: {},
    messageNum: 0,
    
  },

 以上代码使用uni本地存储导致H5刷新出现了清空问题。

---

解决方法：使用原生的存储方式 localStorage.xxx

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

//vuex结合uniapp的持久化存储
const vuexPersisted = new createPersistedState({
    storage: {
    	getItem: key => localStorage.getItem(key),
        setItem: (key, value) => localStorage.setItem(key, value),
        removeItem: key => localStorage.removeItem(key)
    }
})
export default new Vuex.Store({
  plugins: [vuexPersisted],
  state: {
    messageinfo: {},
    messageNum: 0,
    
  },

---

 修改如图

 

---

修改后在刷新就正常了。

以上只对开发H5网页版有效，如开发小程序请用uni.xxx进行存储。