頁面刷新時vuex中數據消失


一、問題描述: 

  我們往往在用vue寫項目時,通常會遇到使用vuex請求數據渲染頁面后,當再次刷新頁面時,渲染頁面的數據會消失不見,造成數據部分一片空白這種現象。例如下圖。其實這種問題是很好解決的,我來總結一下我的解決方法。

 

                              

二、解決方法:

  我在vuex中使用了sessionStorage,我先來介紹一下sessionStorage。

  1、sessionStorage 

  sessionStorage 是HTML5新增的一個會話存儲對象,用於臨時保存同一窗口(或標簽頁)的數據,在關閉窗口或標簽頁之后將會刪除這些數據。

  2、sessionStorage的特點

       1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作,這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基於同一主機名,忽略協議(HTTP和HTTPS)和端口號的要求)

       2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中,在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。

      3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器,只會在本地生效,並在關閉標簽頁后清除數據。(若使用Chrome的恢復標簽頁功能,seesionStorage的數據也會恢復)。

     4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串。true值會轉換為"true")。

     5) 存儲上限限制:不同的瀏覽器存儲的上限也不一樣,但大多數瀏覽器把上限限制在5MB以下

  3、sessionStorage使用方法:

   

1、sessionStorage.setItem("key", "value");   //存
2、var value = sessionStorage.getItem("key");  //取
3、sessionStorage.removeItem("key");   //刪
4、sessionStorage.clear(); // 清除所有

 

  以上就是sessionStorage的具體用法。

三、具體解決方案:

  首先在請求完數據之后,將數據存放到store里面的同時,將獲取的數據存一份到sessionStorage中。代碼如下:     

在頁面刷新需要再次渲染的時候先判斷vuex中傳過來的數據是否為空, 如果為空從sessionStorage中獲取數據然后渲染數據即可。代碼如下:

 

這樣執行完之后,效果如下:

                               


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM