博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5 localstorage解决Ajax回退的坑
阅读量:6257 次
发布时间:2019-06-22

本文共 1446 字,大约阅读时间需要 4 分钟。

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内容显示到页面的时候,会自动回到原来的位置,不需要再重新定位了。

转载地址:http://asxsa.baihongyu.com/

你可能感兴趣的文章
浅谈C# 多态的魅力(虚方法,抽象,接口实现)
查看>>
jQuery--百度百科
查看>>
Unity3D 之2D动画机
查看>>
基础知识系列☞闲言
查看>>
蓝牙Ibeacon室内定位和微信摇一摇周边原理分析
查看>>
架构设计:负载均衡层设计方案(7)——LVS + Keepalived + Nginx安装及配置
查看>>
virtualbox端口转发
查看>>
DiscuzX2.5 程序底层架构
查看>>
Jenkins_多项目构建(二):使用Maven聚集关系
查看>>
三大做空工具详解
查看>>
linux全方位掌握一个命令--思路比方法更重要
查看>>
[Flexbox] Use Flex to Scale Background Image
查看>>
【等待事件】序列等待事件总结(enq: SQ - contention、row cache lock、DFS lock handle和enq: SV - contention)...
查看>>
算法与数据结构(七) AOV网的拓扑排序(Swift版)
查看>>
maven pom.xml解释 (转)
查看>>
markdown to html
查看>>
Pspice仿真器
查看>>
ogg 、 Shareplex和DSG RealSync 对比
查看>>
NK3C程序配置
查看>>
webrtc中APM(AudioProcessing module)的使用2
查看>>