Experience a scenario that functions in Safari 14.0, Chrome and Firefox, but not in Safari 14.1:
- Launch the demonstration in 2 different tabs
- Type some text and click on "Submit"
- Move to the other tab and click on "get"
You should be able to synchronize messages via localStorage between 2 tabs hosted on the same domain.
Demo code:
<h1>To localStorage</h1>
<form id="form">
<input id="text" type="text" />
<input type="submit" />
</form>
<h1>From localStorage</h1>
<button id="getout">get</button>
<p id="out"></p>
<script type="text/javascript">
const form = document.getElementById("form");
const text = document.getElementById("text");
const out = document.getElementById("out");
const getout = document.getElementById("getout");
form.addEventListener("submit", function (e) {
localStorage.setItem("test", text.value);
e.preventDefault();
});
function retrieveContent() {
out.textContent = localStorage.getItem("test");
}
retrieveContent();
getout.addEventListener("click", retrieveContent);
window.addEventListener("storage", retrieveContent);
</script>