好吧，最近真的是太忙懶了，都沒寫過博客了。。。最近做了兩個活動，兩個活動中對於在頁面跳轉之后返回，都需要保留原頁面的一些狀態。於是總結一下。
頁面狀態描述
例如，一個頁面中某個模塊，有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.加多些從新請求數據的判斷，例如，當某個接口的數據不對應時，所有接口都需要重新請求等。