One option to achieve this could be to clean the localStorage when the page is about to be closed/unloaded, so nothing stays behind in storage. That way the localStorage would behave like the sessionStorage in the sense that it would be removed once the page is closed, but it would still have the advantage from the localStorage of sharing data across tabs.
For that you could use the onbeforeunload event:
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
Something like this:
// code here
...
// you have the data in the localStorage
localStorage.setItem("data", "My Data");
// more code here
...
// when the page is about to be unloaded, remove the localStorage data
window.addEventListener("beforeunload", function() {
localStorage.removeItem("data");
});
But that solution is way too simple, and there is a catch: when you close one tab, the localStorage data is deleted, even if you have other tabs open! (leaving them without any data). To prevent removing the data when one of the tabs is closed, you could keep track of the number of tabs, and only clean the localStorage when the number is zero.
The pseudo-code for that would be:
- On page load:
- If the
localStorage has a count of tabs
- Increment the tab count by 1
- Or else (no count of tabs)
- Create a variable in the
localStorage that will contain the number of tabs.
- Set that variable to 1 (the current tab).
- On page unload:
- Decrease the tab count by 1.
- If the tab count is zero (this was the last tab open)
- Delete the content of the
localStorage
And here is a really simple demo. I added some console.log messages so you can open the console and see what is happening with each load/unload:
<!doctype html>
<html>
<head>
<title>Test LocalStorage</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="tabs">Open tabs = 0</div>
<script>
window.addEventListener("load", function() {
if (!localStorage.tabs) {
console.log("Create the tab count");
localStorage.setItem("tabs", 1);
// restore data in case of refresh, or set to initial value in case of new window
localStorage.setItem("data", sessionStorage.getItem("data") || "Initial");
} else {
console.log("Add one tab to the count");
localStorage.tabs++;
}
document.getElementById("tabs").innerHTML = "Open tabs = " + localStorage.tabs;
});
window.addEventListener("beforeunload", function() {
if (parseInt(localStorage.tabs) == 1) {
console.log("Last tab: remove localStorage");
// save the data temporarily in the sessionStorage (in case of reload)
sessionStorage.setItem("data", localStorage.getItem("data"));
localStorage.removeItem("tabs");
localStorage.removeItem("data");
} else {
console.log("There are more tabs open, decrease count by 1");
localStorage.tabs--;
}
});
</script>
</body>
</html>
Copy that code into a page, and open it in several tabs, you'll see how the number of tabs increases (and updates if you reload one of the open tabs). Then close them and with the last one, the "data" item in the localStorage will be cleared.
