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 + "?sid=@Request["sid"]";
}

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

Html5 localstorage解决Ajax回退的坑的更多相关文章

  1. Ajax回退刷新页面问题的解决办法

    在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm   这篇文章主要介 ...

  2. webapi 解决ajax跨域请求问题

    webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...

  3. 通过history解决ajax不支持前进/后退/刷新

    前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互 ...

  4. HTML5 localStorage使用教程

    在客户端存储数据,HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  5. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  6. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  7. 如何解决ajax跨域问题(转)

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...

  8. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  9. 如何解决ajax跨域问题

    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...

随机推荐

  1. Windows 8.1 应用再出发 - 几种新增控件(1)

    Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...

  2. Zabbix3.0+CentOS7.0+MariaDB5.5监视服务器安装

    本次安装采用: Centos7.0 Zabbix3.0 MariaDB5.5 -------------------  2012/12/2更新 最新的Centos7.1或者Redhat7.1版本在最后 ...

  3. [UML]UML系列——状态机图statechart diagram

    系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...

  4. Objective-C入门

    厂长最近又有新计划,准备做iOS上的开发,要操作工们(其实就是我自己)学习Objective-C,准备为厂子下一步的发展做出巨大贡献.拿人钱财,替人消灾,又得花时间折腾一门语言.话说自从来到现车间,用 ...

  5. tomcat安全配置

    1. 注释或删除 tomcat-users.xml 所有用户权限,看上去如下: <tomcat-users></tomcat-users> 2.  隐藏tomcat版本信息 1 ...

  6. EF结合三层:三层中数据层父类和业务层父类的使用

    今天我们主要讨论下数据层父类和业务层父类的使用.众所周知,数据层无非就是实现增删改查的方法.无论是哪个实体类,无非就是为了实现增删改查方法,所有我们在三层的DAL层封装了一个BaseDAL类,来做增删 ...

  7. Javascript--练习(包括主界面图片轮播效果)

    练习一 例子1:做一个问题,如果输入的答案正确则弹出正确,错误弹出错误: 这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样: Body中代 ...

  8. MySQL联合查询语法内联、左联、右联、全联

    MySQL联合查询效率较高,以下例子来说明联合查询(内联.左联.右联.全联)的好处: T1表结构(用户id,用户名,密码)   userid   username  password 1   jack ...

  9. Web调试工具——Fiddler介绍

    Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...

  10. [读书笔记]C#学习笔记七: C#4.0中微小改动-可选参数,泛型的可变性

    前言 下面就开始总结C#4.0的一些变化了, 也是这本书中最后的一点内容了, 这一部分终于要更新完了. 同时感觉再来读第二遍也有不一样的收获. 今天很嗨的是武汉下雪了,明天周六,一切都是这么美好.哈哈 ...