html5回退,Html5 localstorage解决Ajax回退的坑

A页面通过ajax加载数据，并且是滚动加载效果，当滚动几个屏幕之后，进入新的链接页面B，再返回到A的时候，A页面的数据有需要重新加载，从头开始了，体验非常不好。

解决办法：1)hash；2)html5的history特性；3)localstorage/cookie等，综合而看localstorage是最简单的，不需要引入其他东西，简单改造即可实现。

//重置页面环境

function resetStatus() {

var oldStatus = window.localStorage.getItem("goodStatus");

//如果本地没有存放数据，直接从头加载

if (oldStatus == null) {

loadPdt();

return;

}

//提取本地存放的数据

var oldJson = JSON.parse(oldStatus);

page = oldJson.page;

if (oldJson.kw.length > 0) {

$("#search_input").val(oldJson.kw);

$("#search_text").hide();

$("#search_cancel").show();

}

orderby = oldJson.order;

ctgId = oldJson.ctgId;

//-----------

//something todo

//-----------

//直接将存储好的html显示到页面

$("#goodsList").html(window.localStorage.getItem("goodlist"));

//清除本地数据，防止主动刷新

window.localStorage.removeItem("goodStatus");

window.localStorage.removeItem("goodlist");

}

//替代之前的a链接直接跳转的方式，目的是将数据存储起来

function openPdtDetail(id) {

//存储数据

window.localStorage.setItem("goodStatus", JSON.stringify({ page: page, kw: $.trim($("#search_input").val()), order: orderby, ctgId: ctgId }));

window.localStorage.setItem("goodlist", $("#goodsList").html());

window.location.href = "/Mobile/Goods/Detail/" + id + "[email protected]["sid"]";

}

而且发现有一个好处，将html内容显示到页面的时候，会自动回到原来的位置，不需要再重新定位了。

原文：http://www.cnblogs.com/qidian10/p/5785825.html