本文介绍一种基于SessionStorage的页面缓存方案，解决Web应用页面跳转后滚动位置丢失的问题。通过为容器添加特定类名和标识，在离开页面时保存内容状态，返回时自动恢复，提升用户体验。
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];
})
}
}大部分代码可以直接复制使用，只需根据实际需求进行适当调整，即可实现良好的使用效果。
GitHub项目地址：https://github.com/JunJieDing666/YouZhiGou
总结
以上介绍了JS返回页面时自动回滚到历史浏览位置的方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此感谢大家对本站的支持！