苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:8434回复:1

前端页面返回上一页时,如何使得上一页内容不刷新,保持之前的状态?

楼主#
更多 发布于:2018-09-04 10:54
比如我有个列表页面,根据列表具体内容进入详细页面,在详细页面中点击”返回上一页“后页面跳转至列表页面,如何使得列表页面的内容不刷新?



回答:
9 人赞同了该回答


第一遍从服务器获取列表数据后储存至localStorage,判断如果localStorage在你设定的某一时间段内未过期就不从服务器获取新数据。
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
沙发#
发布于:2018-09-04 10:56



open
前端小工,安分的纳尼亚人
你可以查一查pjax,主要作用pushState和ajax来实现


其中:
  • 为了不引发界面刷新,修改 URL 时需要使用 URL hash 或者 history.pushState()。
  • 注册 listener、解析 URL 和调用 listener 可以交给前端路由。(自己年轻的时候也造过一个前端路由的轮子 PRouter.js。(逃
当然如果不希望把一些状态保存在 URL 里,那也可以保存在 localStorage 里。但不变的是一定要用状态来驱动页面行为,而不是先执行页面行为然后再去保存状态




谢然
2 人赞同了该回答

简单的状态可以放在hash里
再复杂点的可以放在localstorage或者sessionstorage里
要是再复杂的话,建议还是层叠多个视图吧,这样无论多复杂的状态都会保存
游客


返回顶部