使用localStorage跨页面通信

localStorage 即使浏览器关闭了,数据也会被保存下来并可用于所有来自同源(相同域名、协议和端口)窗口的加载。

sessionStorage 数据存储在窗口对象中,对于其他窗口或标签不可见,并且当窗口关闭时,数据丢失。

sessionStorage常用于前后端分离用来记录登录状态。

两种web storage的用法相同


setItem 和GetItem

如何使用localStorage跨页面通信呢,例如有这样一个需求,

用户登录后台,开启了很多tab页面。然后因为某种原因被踢下线,当前这个tab就要退出到登录页面,同时其他页面也希望能退出不再显示。

我们先开启两个页面,page1和page2,两个都是都是同源

page1监听storage事件


监听storage事件

page2设置localStorage


设置localStorage

打开page2的时候page1就执行了storage事件~然后可以用e.key判断setItem的key和获取value进行退出操作~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。