在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用。
在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下:
页面缓存
使用方法
用法也很简单,咱一步一步讲。
首先,在你需要缓存标签容器的类名中加入缓存,并写一个名字作为该容器的唯一标记,示例如下:
& lt; div类=" weui-tab缓存" name=爸甘北?
…
& lt;/div>
其次,声明全局变量,获取缓存内容和容器,示例如下:
var缓存;
var cacheId=$ (“.cache”) .attr(“名字”);
随后,在页面加载时调用缓存,在离开页面时生成缓存,代码如下:
窗口。onload=function () {//载入缓存的列的表
loadCache (cacheId);
｝
窗口。onunload=函数(){//可以通过needCache这个国旗来控制是否需要缓存
如果(localStorage。needCache=='真的'){//离开页面时生成缓存
createCache (cacheId);
｝
｝/* *
* @brief可对指定多个控件进行内容和位置的缓存
* @param cacheId缓存元素的id
* @return零
* */函数createCache (cacheId) {//对内容进行缓存
var列表=[];
var listController=$ (' .cache ');
美元。每个(listController,函数(指数、价值、数组){
list.push (value.innerHTML);
})//对浏览到的位置进行缓存
var顶级=[];
var topController=$ (“.cache”);(直“上”);
美元。每个(topController,函数(指数、价值、数组){
top.push (value.scrollTop);
})//存sessionstorage入中
sessionStorage。setItem (cacheId JSON.stringify ({
列表:列表,
上图:前
}));
｝/* *
* @breif可对指定多个控件加载缓存
* @param加载缓存的id
* @return零
* */函数loadCache (cacheId) {//一定要放在整个js文件最前面
缓存=sessionStorage.getItem (cacheId);
如果(缓存){
缓存=JSON.parse(缓存);//还原内容
var listController=$ (' .cache ');
美元。每个(listController,函数(指数、价值、数组){
价值。innerHTML=cache.list(指数);
})//还原位置
var topController=$ (“.cache”);(直“上”);
美元。每个(topController,函数(指数、价值、数组){
价值。scrollTop=cache.top(指数);
})
｝
}
大部分都可以直接复制,再根据你的需要改进一下,就可以很好的使用了。
github传送地址:https://github.com/JunJieDing666/YouZhiGou
以上所述是小编给大家介绍的JS返回页面时自动回滚到历史浏览位置,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
