手机页面点击返回时,之前通过ajax获取并添加的元素又要重新ajax,如何避免?


有一个手机购物网站,商品列表往下拉,每次到底部的时候是通过ajax加载的新的商品的。但是当点击一个商品进去浏览后再返回上一页,结果所有通过ajax过来的商品都不见了,要重新加载,这个用户体验很不好,该怎么解决。
如果不能解决,能否有什么更好的方式去显示这个商品列表,不能分页

jquery HTML Ajax JavaScript

魔力的新月 10 years, 11 months ago

最近我也在做这种单页面应用,和题主说的问题是一样的,说说我的做法吧
1. 写一个配置:哪些页面是需要缓存的,哪些页面是不需要缓存的
2. 页面上的数据基本上都是通过ajax获取的,通过ajax获取数据并渲染出页面后,点击列表之后查看详情(这时如果页面是需要缓存的就把页面隐藏,不缓存这个页面就直接删除掉),出现一个详情页,详情页是不需要缓存的
3. 详情页面用户可能会操作,用户操作如果会造成页面变化(会直接影响列表页),若出现这种情况,使用localStroage设置一个缓存(表示需要重新加载列表页),再次返回列表页可根据这个缓存去判断是不是需要重新加载,不需要加载(就把列表页显示出来就行了,还是在原来位置上),需重新加载(重新ajax获取数据)

飞机是这样的 answered 10 years, 11 months ago

单页面应用,交给框架去管理路由,如Backbone,在render时判断是否需要加载数据。也就相当于作为一个层。

挖拉个擦擦擦 answered 10 years, 11 months ago

localstorage?

沉默的沉船 answered 10 years, 11 months ago

考虑一下 pjax?

性感的云吞 answered 10 years, 11 months ago

两个方案吧。

  1. 将Ajax取来的东西暂存到本地(比如 localStorage ),后退时渲染出来。
  2. 将详情页作为一个层加载进来,后退只关闭详情页,这样列表页就不需要重新渲染了。
爱罗伊子爵 answered 10 years, 11 months ago

Your Answer