-
Notifications
You must be signed in to change notification settings - Fork 0
/
sessionStorage.html
75 lines (57 loc) · 2.37 KB
/
sessionStorage.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
<script>
if (!sessionStorage.length) {
// Ask other tabs for session storage
localStorage.setItem('getSessionStorage', Date.now());
};
window.addEventListener('storage', function (event) {
//console.log('storage event', event);
if (event.key == 'getSessionStorage') {
// Some tab asked for the sessionStorage -> send it
localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
localStorage.removeItem('sessionStorage');
} else if (event.key == 'sessionStorage') {
// sessionStorage is empty -> fill it
var data = JSON.parse(event.newValue),
value;
for (key in data) {
sessionStorage.setItem(key, data[key]);
if(key == 'name'){
document.getElementById('showData').innerHTML = JSON.parse(data[key]);
}
}
}
else if(event.key == 'dataUpdated'){
var data = JSON.parse(event.newValue),
value;
for (key in data) {
sessionStorage.setItem(key, data[key]);
if(key == 'name'){
document.getElementById('showData').innerHTML = JSON.parse(data[key]);
}
}
}
});
window.addEventListener('load', function () {
localStorage.setItem('getSessionStorage',Date.now());
document.getElementById('showData').innerHTML = JSON.parse(sessionStorage.getItem('name'));
});
function updateData() {
var nameText = document.getElementById('nameText').value;
sessionStorage.setItem('name', JSON.stringify(nameText));
var showData = document.getElementById('showData');
showData.innerHTML = nameText;
localStorage.setItem('dataUpdated', JSON.stringify(sessionStorage));
localStorage.removeItem('dataUpdated');
};
</script>
</head>
<body>
<h1> Share Updated Data Accross tabs
</h1>
<input id="nameText" placeholder="Enter your data"></input>
<button onclick="updateData()"> updateData</button>
<p id="showData">empty data</p>
</body>
</html>