js返回頁面時自動回滾到歷史瀏覽位置

摘要： 在我的系統實際開發過程中遇到一個需求，我需要讓應用在各個頁面間跳轉時回到每頁原先瀏覽到的位置，方便使用者使用。 在網上查資料時，看到的方案有不少，眾說紛紜，但真正給出可行可用程式碼的寥寥無幾，所以我乾脆按自己的想法用SessionStorage寫了一個快取頁面的方法，在離開頁面時將需要快取...

在我的系統實際開發過程中遇到一個需求，我需要讓應用在各個頁面間跳轉時回到每頁原先瀏覽到的位置，方便使用者使用。

在網上查資料時，看到的方案有不少，眾說紛紜，但真正給出可行可用程式碼的寥寥無幾，所以我乾脆按自己的想法用SessionStorage寫了一個快取頁面的方法，在離開頁面時將需要快取的容器中所有內容都存到SessionStorage中，在返回頁面時重新載入，方便使用者操作，效果如下：

使用方法

用法也很簡單，咱一步一步講。

首先，在你需要快取標籤容器的類名中加入cache，並寫一個name作為該容器的唯一標記，示例如下：

<div class="weui-tab cache" name="index">
....
</div>

其次，宣告全域性變數，獲取快取內容和容器，示例如下：

var cache;
var cacheId = $(".cache").attr("name");

隨後，在頁面載入時呼叫快取，在離開頁面時生成快取，程式碼如下：

window.onload = function () {
//載入快取的列表
loadCache(cacheId);
}

window.onunload = function () {
//可以通過needCache這個flag來控制是否需要快取
if (localStorage.needCache == 'true') {
//離開頁面時生成快取
createCache(cacheId);
}
}

/* *
 * @brief 可對指定多個控制元件進行內容和位置的快取
 * @param cacheId 快取元素的id
 * @return null
 * */
function createCache(cacheId) {
//對內容進行快取
var list = [];
var listController = $('.cache');
$.each(listController, function (index, value, array) {
list.push(value.innerHTML);
})
//對瀏覽到的位置進行快取
var top = [];
var topController = $(".cache").find(".top");
$.each(topController, function (index, value, array) {
top.push(value.scrollTop);
})
//存入sessionstorage中
sessionStorage.setItem(cacheId, JSON.stringify({
list: list,
top: top
}));
}

/* *
 * @breif 可對指定多個控制元件載入快取
 * @param 載入快取的id
 * @return null
 * */
function loadCache(cacheId) {
//一定要放在整個js檔案最前面
cache = sessionStorage.getItem(cacheId);
if (cache) {
cache = JSON.parse(cache);
//還原內容
var listController = $('.cache');
$.each(listController, function (index, value, array) {
value.innerHTML = cache.list[index];
})
//還原位置
var topController = $(".cache").find(".top");
$.each(topController, function (index, value, array) {
value.scrollTop = cache.top[index];
})
}
}

大部分都可以直接copy，再根據你的需要改進一下，就可以很好的使用了。

github傳送地址： ofollow,noindex">https://github.com/JunJieDing666/YouZhiGou

若有錯誤煩請指出，有地方不理解歡迎討論。