vue利用会话(sessionStorage)实现浏览器刷新后,值被重置问题

本文介绍了如何在标签页切换后保持页面刷新前的状态,推荐使用sessionStorage而非localStorage,因为前者能满足临时存储且不会过度占用空间。同时提到sessionStorage保存的数据为字符串,需注意数字类型的处理。
摘要由CSDN通过智能技术生成

效果:标签页切换后页面刷新,保存刷新前选中的标签页。

实现方式:

        1. 利用state,通过触发action或mutation来改变实现(不推荐)。

        2. 利用本地存储(localStorage、sessionStorage、cookie)实现,这里使用sessionStorage来实现,因为localStorage是永久存储在本地,除非你主动去删除,而cookie则根据你设置的有效时间来存储,缺点就是不能储存大数据并且不易读取。具体可根据业务需求去选用。

如上图,在选中2F后刷新页面,楼层回到默认值(整体),但楼层依旧显示2F,代码如下:

注意:sessionStorage保存的数据是以字符串形式保存的。即使你保存的是数字,取出来的也是字符串。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,当页面刷新后,路由会问题可以通过以下几种方式解决: 1. 使用路由前守卫进行判定:可以在路由前守卫中判断是否需要新加载路由。在刷新页面时,可以通过设一个标志位来判断是否需要新加载路由。如果需要新加载路由,则执行加载动态路由的函数,否则直接放行。这样可以保证在刷新页面后,路由能够正确地恢复到之前的状态。\[1\] 2. 使用路由守卫:通过使用路由守卫(beforeEach、afterEach),可以在路由导航之前和之后执行一些逻辑。在beforeEach守卫中,可以检查是否存在保存的路由状态,如果存在,则将其应用于导航。这样可以在刷新页面时恢复到之前的路由状态。\[2\] 3. 使用持久化存储:将路由信息存储在本地存储(如LocalStorage或SessionStorage)中,在应用程序初始化时从存储中读取路由信息,并恢复到相应的路由状态。这样在刷新页面后,可以从存储中获取路由信息,并新导航到之前的路由。\[3\] 以上是几种常见的解决方案,你可以根据自己的需求选择适合的方式来解决刷新页面后路由问题。 #### 引用[.reference_title] - *1* [vue2实现刷新新加载动态路由](https://blog.csdn.net/qq_50994125/article/details/130140095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [刷新页面会导致页面路由问题怎么解决](https://blog.csdn.net/weixin_51654689/article/details/130908434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值