vuex of state data loss after vue refresh the page single-page application compatibility issues and beforeunload

After using recent data vue write h5 project, when window.location redirect page or refresh the current page, refresh the page when found, save in vuex instances where the store will be lost.

Later Find Great God of Internet solutions:

export default {
  name: 'App',
  created () {
    // read status information in sessionStorage when the page is loaded 
    IF (sessionStorage.getItem ( "Store" )) {
         the this . $ Store.replaceState (Object.assign ({}, the this . $ Store.state, the JSON.parse ( sessionStorage.getItem ( "Store" ))))
    } 

    // when the page will refresh the information in to save vuex sessionStorage in 
    window.addEventListener ( "beforeunload", () => {
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

Get the great God of the solution immediately vuex instance data does not disappear after Chrome raised type, page refresh, was very glad to solve this problem, but the next day, when I used the phone debugging features found vuex data management still lost. Only to find beforeunload compatibility issues in the mobile terminal ( beforeunload browser for mobile end in terms of (Safari, Opera Mobile, etc.) do not support beforeunload event ).

No way, because the project in time, the lost data can only be honest with localStorage stored locally, then use the data event of the page to save up, and then use vue lifecycle delete stored data, which is indeed not very good, but finally solved the problem of data loss.

(LocalStorage used as follows):

    localStorage.setItem ( "key", "value"); // to "key" a name of a stored value "value" 

    localStorage.getItem ( "key"); // Get the name "key" value 

    localStorage.removeItem ( "key"); // delete the name "key" information. 

    localStorage.clear (); // Clear all the information localStorage

 

After use vue for the development of the PC side, refresh the page vuex of state data loss problem with the god of solutions can solve this problem, but moving around the end of the page, or other methods it