在我的系統(tǒng)實際開發(fā)過程中遇到一個需求，我需要讓應用在各個頁面間跳轉時回到每頁原先瀏覽到的位置，方便用戶使用。
成都創(chuàng)新互聯(lián)2013年至今，先為蘭坪等服務建站，蘭坪等地企業(yè)，進行企業(yè)商務咨詢服務。為蘭坪企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
在網(wǎng)上查資料時，看到的方案有不少，眾說紛紜，但真正給出可行可用代碼的寥寥無幾，所以我干脆按自己的想法用SessionStorage寫了一個緩存頁面的方法，在離開頁面時將需要緩存的容器中所有內容都存到SessionStorage中，在返回頁面時重新加載，方便用戶操作，效果如下：
頁面緩存
使用方法
用法也很簡單，咱一步一步講。
首先，在你需要緩存標簽容器的類名中加入cache，并寫一個name作為該容器的唯一標記，示例如下：
....
其次，聲明全局變量，獲取緩存內容和容器，示例如下：
重慶分公司
重慶分公司
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，再根據(jù)你的需要改進一下，就可以很好的使用了。
github傳送地址： https://github.com/JunJieDing666/YouZhiGou
總結
以上所述是小編給大家介紹的JS返回頁面時自動回滾到歷史瀏覽位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
