在写项目的时候遇到这样一个问题,一个类似电商的,根据类别、品牌、年份等查商品,点击查询按钮通过ajax查询出的。查出来之后点击图片跳转到商品详情页,这时候再返回到商品查询页时,之前ajax读出来的数据会丢失(丢失的主要是通过事件查出来的数据),页面会回到刚进入这个页面时的状态。
解决方案:
1、如果是pc端,直接用window.open(),或者aget="_blank"打开新页面。
2、如果是移动端,可以用HTML5本地存储(web Storage)中的localStorage和sessionStorage将整个页面的数据存储在客户端本地。
localStorage: localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。
sessionStorage:sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。
localStorage和sessionStorage的主要方法:
setItem (key, value) —— 保存数据,以键值对的方式储存信息。
getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值。
removeItem (key) —— 删除单个数据,根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
该项目遇到的问题使用sessionStorage解决。以下为具体代码。
//点击跳转
function goDesc(){
//跳转之前将局部页面保存到sessionStorage对象中。
window.sessionStorage.setItem("myhtml",$("#shop_list").html());
window.location.href="http://www.baidu.com";
}
//页面刷新
window.onload=function(){
//读取sessionStorage对象中的内容
var myhtml= window.sessionStorage.getItem("myhtml");
//不为空表示是返回上一步进入该页面的。
if(myhtml!=null){
//将sessionStorage对象中保存的页面添加到页面中
$("#shop_list").html(myhtml);
//清空sessionStorage对象的内容。
window.sessionStorage.clear();
}
}
注意:只要浏览器不关闭,sessionStorage中的内容是不会清空的,所以在添加完内容要手动清空内容。