uniapp develops H5 and refreshes the webpage, which leads to the problem of clearing local localStorage data

Description of the problem: When using uniapp to develop H5 webpages, the problem of clearing local data when refreshing in combination with uniapp's local storage occurs.

code show as below:

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,
    
  },

 The above code uses uni local storage to cause the H5 refresh to clear the problem.

---

Solution: Use the native storage method  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,
    
  },

---

 Modify as shown in the figure

 

 

---

After the modification, it will be normal after refreshing.

The above is only valid for the development of the H5 web version. If you are developing a small program, please use uni.xxx to store it.