在浏览器的多个tab页中共享sessionStorage

在浏览器中的多个tab页中共享数据,可以通过cookie或localStorage实现。
某些情况下,需要在浏览器关闭后即清除该数据,可以通过sessionStorage完成。
但sessionStorage仅保存在当前tab页中,想要在多个tab中共享该数据,可通过localStorage实现。

注册storage事件

当localStorage的值发生变化时,页面会监听到”stroage”事件:

1
2
3
4
5
6
7
8
9
10
window.addEventListener("storage", function(event){
if(!event.newValue){
reutrn;
}
if(event.key == "getSession"){
localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
localStorage.removeItem("storeSessionData");
}
...
});

在该函数中,当 localStoragekeygetSession 的内容发生变化时会调用该函数,函数中有一个 event 对象,该event的属性 keylocalStorage改变内容的key(这里为getSession) , 另一个属性 newValue 存储着 localStorage中key对应的内容 ,利用该方式可完成sessionStorage在tab间的共享

通过localStorage.setItem执行storage中的函数

在新打开的tab中,首先检查session的值是否存在,若不存在,则执行:

1
2
3
if(!sessionStorage.getItem("sessionValue")){
localStorage.setItem("getSession", Date.now());
}

编写storage事件函数

1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener("storage", function(event){
...
if(event.key == "getSession"){
localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
localStorage.removeItem("storeSessionData");
}
if(event.key == "storeSessionData"){
sessionStorage.setItem("sessionValue", event.newValue);
$("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
localStorage.removeItem("getSession");
}
...
});

新建tab页中执行localStorage.setItem("getSession", Date.now());会导致其他tab页进入第一个if,执行

1
2
localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
localStorage.removeItem("storeSessionData");

在其他tab执行完第一行代码后,会激活新打开的tab开始执行”storage”事件回调函数中的第二个if,执行sessionStorage.setItem,获取其他tab中sessionStorage存储的值(event.newValue)。
类似的,当某个tab中的sessionStorage的内容被修改时,同样可利用localStorage完成sessionStorage与其他tab的同步。

在线Demo
在Demo中可以看到,页面初始的session为空,点击按钮产生一个内容为随机数的session,再在新的页面中打开该地址,两个tab间的session内容是同步的。

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
if(!sessionStorage.getItem("sessionValue")){
localStorage.setItem("getSession", Date.now());
}else{
$("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
}

window.addEventListener("storage", function(event){
if(!event.newValue){
return ;
}
if(event.key == "getSession"){
localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
localStorage.removeItem("storeSessionData");
}
if(event.key == "storeSessionData"){
sessionStorage.setItem("sessionValue", event.newValue);
$("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
localStorage.removeItem("getSession");
}
if(event.key == "updateSession"){
sessionStorage.setItem("sessionValue", event.newValue);
$("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
localStorage.removeItem("updateSession");
}
});

$("#create-session-btn").click(function(){
var t = Math.random() * 100;
sessionStorage.setItem("sessionValue", t);
$("#session-data-panel").text("Session: " + t);
localStorage.setItem("updateSession", t);
});
});
</script>

<body>
<div id="session-data-panel">Session: No Session</div>
<button id="create-session-btn">Click create a random session</button>
</body>

参考链接:

  1. Using the Web Storage API
  2. Sharing sessionStorage between tabs for secure multi-tab authentication
  3. browser sessionStorage. share between tabs?

本文首发于http://www.miaoyunze.com/,转载请注明出处