JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bob">
</div>
<button>
Click to create sensitive info
</button>
JavaScript
function bootstrap(el)
{
if (!("localStorage" in window) || !("sessionStorage" in window))
{
el.textContent = "You browser does not support storage";
return;
}
function pulseLS(key, val) { localStorage.setItem(key, val); localStorage.removeItem(key); }
function setSecret(secret)
{
el.textContent = secret; // That's the best way to share a secret
sessionStorage.setItem('secret', secret);
pulseLS('msg', secret);
}
var msgCB = function(e) {
if (e.key == 'req' && sessionStorage.getItem('secret'))
// If a tab requested a secret and we have it, let's send it back
pulseLS('msg', sessionStorage.getItem('secret'));
if (e.key == 'msg' && e.newValue != null)
setSecret(e.newValue);
}
localStorage.clear();
window.addEventListener('storage', msgCB);
if (!sessionStorage.getItem('secret')) pulseLS('req', '1');
document.querySelector("button").addEventListener("click", function(e) { setSecret("this is my secret")});
}
bootstrap(document.querySelector("#bob"));