關於保留頁面狀態的一些總結 JS實現頁面進入、返回定位到具體位置

好吧，最近真的是太忙懶了，都沒寫過博客了。。。最近作了兩個活動，兩個活動中對於在頁面跳轉以後返回，都須要保留原頁面的一些狀態。因而總結一下。

頁面狀態描述

例如，一個頁面中某個模塊，有20條數據，摺疊了起來，每點擊一次加載更多按鈕，則加載5條。那麼，當用戶展開了10條數據的時候，點擊了跳轉的地方。當用戶返回的時候。須要展示10數據的樣子。即原頁面狀態。

上張圖片或許更好理解：

 

選擇解決方案

①存儲方式選擇

毫無疑問，要記錄狀態。必需要暫存數據。這裏有兩種方式，localStorage和sessionStorage。二者的區別就很少說了。不過，這種狀況下，固然是sessionStorage更好。

還沒了解這兩個的區別的戳這裏。

 

②存儲時機選擇

 這裏就有必要提到我以前寫的一片總結，《JS實現頁面進入、返回定位到具體位置》。第一種方案，就是能夠沿用這種方式。在用戶點擊的時候記錄一下。可是這裏我要說的不是這種方案。

而是利用window.onunload方法。

也就是說，用戶跳轉會觸發這個事件，那麼只要在這個方法中記錄相應的數據到session裏面便可。

如：

 window.onunload = function(){
    cache.setItem('pageHeight',document.body.scrollTop); //沒錯，返回定位也能夠這樣記錄
    cache.setItem('historyState',{
         essayArrowFlag:self.essayArrowFlag,//展開文案爲展開仍是收起的標誌
         backupEssay:self.backupEssay,//用戶當前展現的數據
         backGuideEssay:self.backGuideEssay //總數據
    });
}

嗯。這樣在頁面加載的時候，先讀取緩存。而後進行相應的賦值展現便可。

咋一看，彷佛沒什麼問題。下面就來講說我遇到的「小坑坑」。

優缺點比較

①優勢

1.不用綁定額外的事件，不用頻繁記錄。減小了開銷。

2.不用寫額外的函數。

②缺點

1.最致命的缺點就是，會在開發過程當中給調試帶來不便。仔細看看方法描述，不錯，頁面刷新也會調用該方法。也就是說，若是你須要刪掉緩存的數據，再來一次的話。根本刪不掉，必須新開一個頁面。

2.也因爲數據難刪掉的緣由，假如更新了某條數據的某些信息。即便是刷新頁面也不會從新請求，取不到最新數據。加上實際狀況下，同一模塊的數據，每每會有幾個不一樣的請求接口來提供。假若有些接口的信息更新了，而另外一些跟不上。常常報錯。整段垮掉。這給測試也帶來了很多麻煩。

優化方向

1.最簡單的，封裝一下緩存模塊。開發的時候，設置一個很小的緩存數據過時時間。

2.加多些重新請求數據的判斷，例如，當某個接口的數據不對應時，全部接口都須要從新請求等。