欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > Vue跨标签通讯(本地存储)(踩坑)

Vue跨标签通讯(本地存储)(踩坑)

2025/2/22 2:23:46 来源:https://blog.csdn.net/2303_77072102/article/details/144270709  浏览:    关键词:Vue跨标签通讯(本地存储)(踩坑)

我司有一个需求【用户指引】 需求是根标签有一个用户指引总开关,可以控制页面所有的用户指引是否在页面进入后初始是否默认打开,但是有些页面会新开标签这就设计到跨标签通讯了

我采取的方案是本地存储

重点:首先本地存储在页面是同源(即域名协议端口三者都相同)的情况下是可以相互访问的

起初是打算用sessionStorage这样用户一刷新页面就默认是关闭的不会存在继续打开这样用户体验会更好(坑来)

步骤1:当我点击本地存储的时候绘画里面会新增一条记录


 

 步骤二:点击新开标签页

 
我们会发现新标签访问绘画存储是没有数据的,但是根标签是有数据的(思维冲突:绘画存储是只要是新标签第一次加载就会清除就会情况绘画仓库里面的所有数据,后续刷新页面是不会清除的)
结论:同源的标签页面的本地存储是继承且相互独立的,绘画存储会清除当前标签页面的本地存储但是不会影响其它页面的绘画存储

解决方案 :换成localStorage存储就不会出现这个问题

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词