Detailed solution to the loss of data in vuex page refresh

reason

In the vue project, use vuex to perform global state management. It is found that when the web page is refreshed, the data saved in the vuex instance store will be lost.

Because the data in the store is stored in the running memory, when the page is refreshed, the page will reload the vue instance, and the data in the store will be reassigned and initialized

Solution

Save the state data in localstorage, sessionstorage or cookie (The difference between the three), this ensures that the page refresh data is not lost and easy to read.

• localStorage: The life cycle of localStorage is permanent, and the data in localStorage will not disappear after closing the page or browser. localStorage data will never disappear unless it is actively deleted.
• sessionStorage: The life cycle of sessionStorage is valid only in the current session. sessionStorage introduces the concept of a "browser window", sessionStorage is data that always exists in a window of the same origin. As long as this browser window is not closed, the data still exists even if the page is refreshed or another page of the same origin is entered. However, sessionStorage will be destroyed after closing the browser window. At the same time, open the same window and the same page independently, and the sessionStorage is also different.
• cookie: The cookie life span is valid only until the set cookie expiration time, even if the window or browser is closed. The storage data size is about 4K, and there is a limit on the number of numbers (different browsers) and generally cannot exceed 20. The disadvantage is that it cannot store big data and is not easy to read.

Since vue is a single page application, operations are routed on one page, so sessionStorage is more appropriate for the following reasons:

• sessionStorage can ensure that sessionStorage data is empty when opening the page;
• Each time the page is opened, localStorage stores the data from the last page, so the previous data needs to be cleared.

The modification of state data in vuex must be modified through the mutation method. Therefore, the sessionstorage needs to be modified while modifying the state. The problem can be solved, but it feels very troublesome. There is a lot of data in the state, and many mutations need to modify the sessionstorage many times. Since this is the case, it is not enough to directly use sessionstorage to solve it. Why do you still need to use vuex to do this in one go?
Vuex data is lost every time the page is refreshed. Can I store the data in the sessionstorage before the page is refreshed?beforeunloadEvents can be fired before page refresh, but listening to the beforeunload event in each page is not appropriate, so the best place to listen to the event is in.

• Read the data in the sessionstorage in the created method and store it in the store.replaceStateMethod, replace the root state of the store
• Store it in sessionstorage in the beforeunload method.

The code is as follows

export default {
  name: 'App',
  created () {
    //Read the status information in sessionStorage when the page is loading    if (("store") ) {
        this.$(({}, this.$,(("store"))))
    } 
    //Save the information in vuex to sessionStorage when the page is refreshed    ("beforeunload",()=>{
        ("store",(this.$))
    })
  }
}

The above is the detailed explanation of the solution to data loss on vuex page refresh. For more information on the solution to data loss on vuex page refresh, please pay attention to my other related articles!