angular2 返回上一页怎么保留上一页的数据?

发布于 2022-09-06 19:42:12 字数 366 浏览 12 评论 0

我现在有一个页面(比如列表页面)
然后点击其中的一条进入下一个页面(比如详情页面,是一个新的页面),然后返回上一页(也就是列表页面)。
这时候会刷新列表页面,呈现的页面又是第一次进入该页的效果,我刚请求的那些数据没了,又得重新请求,如果用户请求了很多,页面很长,返回到这页时都没了,用户体验太差了。
如何做到返回到前一页时保留上一次从该页跳转到其他页面时该页的状态?
我现在是这样做的:查询这个列表之后用localStorage保留数据,把当前的页数带到详情里面,然后加一个返回按钮,再把页数带来,如果有页数就把localStorage存的数据取出,如果没有就删除存的数据。还有没有更好的答案??我想的是不需要加返回按钮,直接点浏览器的返回,就能回到上一页的状态,各位大佬能有更好的解决方案吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

橙味迷妹 2022-09-13 19:42:12

可以把查询参数附加在url上,也就是你的列表页搜索的form表单用get方式请求;
如果列表页是ajax请求的,也可以用#附加在url上,然后加点js获取location.hash即可获取参数。

萝莉病 2022-09-13 19:42:12

我用的是angular2 单页面应用

不再让梦枯萎 2022-09-13 19:42:12

你可以创建一个service, 因为你这个功能就是做stickness嘛, 所以可以叫SticknessService,
在component注入这个service, ngOnInit()的时候去根据对应的标识读取对应的数据。
因为angular service是单例模式的,所以一旦初始化后,这个service就会在了。

用localStorage也是可以做得,类似的原理。 localStorage更适用于在angular中打开的多个tab的情况下。
所以你这种情况使用service就可以了。

还有一种就是使用Router来做,但这个适用于参数不是特别多,而且很简单,比如数字,字符串等。
如果你需要存数组,或者对象,还是推荐使用service。
在component中可以注入router,在ngOnInit的时候监听router的params事件

    this.router.params.subscribe((parmas: any) => {
           //.....
    }
三生殊途 2022-09-13 19:42:12

考虑下Angular的RouteReuseStrategy路由复用策略

蓦然回首 2022-09-13 19:42:12

目前,我们也是采用存localStorage的方式实现的,不过总感觉不优雅,毕竟有时候发现localStorage可能会存满,这样有没有好点的解决方案呢?中间还有可能会存在参数相同的情况

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文