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 + "?sid=@Request["sid"]";
}
而且发现有一个好处,将html内容显示到页面的时候,会自动回到原来的位置,不需要再重新定位了。
Html5 localstorage解决Ajax回退的坑的更多相关文章
- Ajax回退刷新页面问题的解决办法
在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介 ...
- webapi 解决ajax跨域请求问题
webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...
- 通过history解决ajax不支持前进/后退/刷新
前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互 ...
- HTML5 localStorage使用教程
在客户端存储数据,HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- 如何解决ajax跨域问题(转)
由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...
- 看小白如何解决ajax跨域问题
由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...
- 如何解决ajax跨域问题
如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...
随机推荐
- socket进阶
socketserver(在Python2.*中的是SocketServer模块)是标准库中一个高级别的模块.用于简化网络客户与服务器的实现(在前面使用socket的过程中,我们先设置了socket的 ...
- CentOS 一个网卡设置多个IP
方法1:少量IP手动绑定: (这里以绑定IP到eth0为例,其它网卡的话修改相应的文件名即可) 1.复制ifcfg-eth0的网卡配置文件并改名为ifcfg-eth0:0 [root@akinlau ...
- SQL Server In-Memory OLTP 无损PPT分享
我在今年DTCC上SQL Server内存数据库分享 PPT.感兴趣的朋友可以看下,无闩锁的数据结构使得热区问题成为过去,并行很好的维护了CPU Cache的命中率,Native代码执行使得CPU流水 ...
- [C#] 與Android共舞–透過GET方式傳資料給Server(含解決中文編碼問題) (转帖)
上一篇文章分享了透過POST 方式傳資料回Server,這一篇來談談有關於透過GET的方式傳遞 首先,如我預期的一樣,透過網址傳遞,會產生編碼問題,這邊我就順代解掉,希望有碰到的人 可以不用為此煩惱. ...
- MERGE 用法
1.不带输出的SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ALTER proc [dbo].[InsertShiGongJiao] ), @com ...
- Queue插入的时候报错:源数组长度不足。请检查 srcIndex 和长度以及数组的下限。
异常问题记录: 本想自己手动实现一个日志记录功能.使用Queue队列集合来实现多线程的日志记录. 测试 一个线程写入数据Enqueue和一个线程读取数据Dequeue ,直接用的无休眠死循环. 终于抛 ...
- 在Mac OS X上用自己编译出的CoreCLR运行.NET程序
当昨天被Mac OS X上无法编译CoreCLR的问题困扰时(详见Mac OS X上尝试编译CoreCLR源代码),后来发现这个难题竟然被神人@kangaroo给解决了,连CoreCLR的微软开发人员 ...
- [ACM_动态规划] 轮廓线动态规划——铺放骨牌(状态压缩1)
Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One night, af ...
- JAXB命名空间及命名空间前缀处理
本篇介绍下JAXB进阶使用,命名空间处理 使用package-info.java添加默认命名空间在需要添加命名空间的包下面添加package-info.java文件,然后添加@XmlSchema注解, ...
- Gershgorin圆盘定理
众所周知,对一个$n$阶方阵求取特征值需要解一个一元$n$次方程,当$n$很大时,这是很难实现的.但是,在有些涉及矩阵的实际问题中,我们并不需要知道矩阵特征值的准确值,而只需要知道其大概范围就行了,例 ...