解決動態網頁在微信瀏覽器中每次返回都會重新載入的問題

前言

假設我們我們有一個搜尋結果列表頁面，其內容為我們通過 AJAX 從後端動態獲取的。搜尋頁面中的每一個條目是一個超連結，我們可以點選超連結去請求另一個網頁檢視條目詳情。這是一種很常見的情況。可是在微信瀏覽器，我們會遇到這樣一個問題：當我們想從條目詳情返回條目列表頁面時，微信瀏覽器會重新重新整理條目列表頁面，我們會找不到剛才瀏覽的位置，又要重新滾動，上滑載入，等等等等，過了好久才能找到剛才瀏覽的位置，繼續瀏覽。

這個問題的本質原因是微信瀏覽器的後退功能並不會儲存網頁快照，而是簡單粗暴的重新載入網頁。

這是一個很影響使用者體驗的問題。有解決辦法嗎？

當然有，最好的解決辦法就是做一個 SPA 單頁應用來實現。但是如果我們的網頁已經存在，再重新成單頁應用會增加很多工作量怎麼辦呢？這篇文章將介紹通過快取來實現記錄原有位置的功能。

思路

既然微信瀏覽器的後退功能我們無法修改，那我們的思路可以是自己儲存網頁的資訊，當我們重新載入時先進行判斷，判斷本地是否有快取的網頁資訊，如果有，則讀取網頁資訊，將網頁復原的原位置。如果沒有，則像之前那樣向後臺傳送 AJAX 來獲取資料。

這樣我們將大問題分解成了這幾個小問題

• 如果快取資料

• 什麼時候快取資料

• 快取哪些資料

• 如何判斷復原網頁

　如何快取資料

我這裡的想法是使用 LocalStorge 來儲存資料。 LocalStorge 只能儲存字串資料，如果我們的資料不是字串，我們可以將其轉換為 JSON 格式在儲存。

// data 是我們要快取的資料
localStorge.setItem('listData', JSON.strinify(data))

什麼時候快取引數

我這裡的想法是在我們點選檢視商品詳情之前，先進行快取，然後進行跳轉。這時我們就不能使用 <a href="xxx"> 了，而要使用 window.location.href 來做跳轉

// .list-item 是我們點選跳轉的列表條目
let item = document.getElementByClassName('.list-item')
item.addEventListener('click', function
 
 () {
  localStorge.setItem('listData', JSON.strinify(data))
  window.loaction.href = 'xxx'
})

快取哪些資料

我這裡的想法是要快取從後端獲取的全部資料，key值（我這裡是搜尋關鍵字），滾動位置，如果我們是按頁碼載入的話還要快取頁碼位置以便回到列表頁瀏覽後繼續載入。

let item = document.getElementByClassName('.list-item')
item.addEventListener('click', function () {
  var data = {
    data: response,  // 從後臺獲取的資料
    key: key
    scrollTop: document.body.scrollTop,
    page: page
  }
  localStorge.setItem('listData', JSON.strinify(data))
  window.loaction.href = 'xxx'
})

　如何判斷復原網頁

關於如何判斷資料這個就比較業務化了，大體思路還是按照key進行判斷。復原網頁就比較簡單了，判斷通過之後，將data資料渲染到 HTML 上，將滾動距離重新賦值給 document.body.scrollTop 即可。

如果判斷不通過則可以通過如下方式刪除快取，然後重新獲取資料即可。

localStorge.removeItem('listData')