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

Question

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

Answer 1

两个方案吧。

1. 将Ajax取来的东西暂存到本地（比如localStorage），后退时渲染出来。
2. 将详情页作为一个层加载进来，后退只关闭详情页，这样列表页就不需要重新渲染了。

Answer 2

考虑一下 pjax？

Answer 3

localstorage?

Answer 4

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

Answer 5

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