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


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

jquery HTML Ajax JavaScript

魔力的新月 10 years, 9 months ago

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

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

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

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

localstorage?

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

考虑一下 pjax?

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

两个方案吧。

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

Your Answer