解決頁面刷新後vuex數據丟失

                                解決頁面刷新後vuex數據丟失

在vue項目中使用vuex來記錄一些狀態時發現按F5刷新頁面後vuex裏面的數據會丟失.因爲js運行的代碼都是存儲在內存中.刷新頁面內存會被釋放,所以這些數據都會丟失,只能用h5提供的api:localStorage或者sessionStorage來記錄頁面刷新前的vuex狀態.

兩者大致區別是:localStorage沒有時間期限,除非將它移除,sessionStorage即會話,當瀏覽器關閉時會話結束,有時間期限

我這裏使用localStorage來記錄

在vue註冊頁面更新前事件 在事件裏面處理vuex的狀態:

beforeUpdate(){
    var type = this.$store.state.movieRouteType;
    localStorage.setItem('changeMoiveType',type)
  }

使用localStorahe記錄刷新前記錄一下,確保狀態不丟失.直接使用localStorage.setItem('xxx',value)即可保存.獲取時使用:localStorage.getItem('xxx').

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章