网页返回上一页时怎么保留通过ajax获取的数据？

Question

问题是这样子：

我现在有一个页面（比如列表页面），分为很多结构相同的条目，然后用上拉加载等方式通过ajax请求更多的数据放到页面中。

然后点击其中的一条进入下一个页面（比如详情页面，是一个新的页面），然后返回上一页（也就是列表页面）。

这时候会刷新列表页面，呈现的页面又是第一次进入该页的效果，我刚请求的那些数据没了，又得重新请求，如果用户请求了很多，页面很长，返回到这页时都没了，用户体验太差了。

如何做到返回到前一页时保留上一次从该页跳转到其他页面时该页的状态？ajax请求的数据都在，并且页面滚动到跳转时的地方。

Answer 1

• 有一个比较土的方式是锚点，每次加载你都改变一次锚点，当重新载入这个页面时，根据锚点来重新加载信息

• 更加现代的方式你可以用history.pushState方法和history.replaceState以及window对象的popstate事件，这个方式可以让你用JS自己控制URL和前进后退事件，并且用ajax刷新网页的局部内容，新浪微博就用了这个技术，我早年写过一个demo: http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page/，详细API介绍你可以看MDN: https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries

Answer 2

有页面跳转,数据可以通过sessionStorage来存储跳转之前的数据吧,要不就不要有页面跳转,做成类似于tab控制display: none/block吧

Answer 3

cookie 或者localstorage 或者单页完成应用

Answer 4

我感觉如果是列表和详情的页面可以做成不跳转的用tab控制，显示不显示