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數據丟失問題使用大神的解決方案能夠解決此問題，可是移動端網頁仍是繞其餘方法吧