vue單頁面應用刷新網頁后vuex的state數據丟失問題以及beforeunload的兼容性

最近在用vue寫h5項目，當使用window.location重定向頁面或者刷新當前頁面時， 發現當刷新網頁后，保存在vuex實例store里的數據會丟失。

后來在網上查找大神的解決方案如下：

export default {
  name: 'App',
  created () {
    //在頁面加載時讀取sessionStorage里的狀態信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在頁面刷新時將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

拿到大神的解決方案后，馬上在Chrome上調式，頁面刷新后vuex實例數據確實不會消失，當時很慶幸解決了此問題，但是第二天，我用手機調試功能時，發現vuex管理的數據還是丟失了。才發現beforeunload在移動端存在兼容性問題（beforeunload對於移動端瀏覽器而言(Safari, Opera Mobile等)而言不支持beforeunload事件）。

沒辦法，因為項目趕，只能老老實實把丟失的數據用localStorage存儲本地，然后利用頁面的事件把數據存起來，再使用vue的生命周期刪除存儲的數據，該方法確實不怎么理想，但總算解決了數據丟失問題。

（localStorage用法如下）：

    localStorage.setItem("key","value");//以“key”為名稱存儲一個值“value”

    localStorage.getItem("key");//獲取名稱為“key”的值

    localStorage.removeItem("key");//刪除名稱為“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

 

對於使用vue開發PC端，刷新網頁后vuex的state數據丟失問題使用大神的解決方案可以解決此問題，但是移動端網頁還是繞其他方法吧