使用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进行退出操作~

你可能感兴趣的:(使用localStorage跨页面通信)