溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在我的系統實際開發過程中遇到一個需求，我需要讓應用在各個頁面間跳轉時回到每頁原先瀏覽到的位置，方便用戶使用。
在網上查資料時，看到的方案有不少，眾說紛紜，但真正給出可行可用代碼的寥寥無幾，所以我干脆按自己的想法用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傳送地址： https://github.com/JunJieDing666/YouZhiGou
總結
以上所述是小編給大家介紹的JS返回頁面時自動回滾到歷史瀏覽位置，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
