Here is my code:
<script type="text/javascript">
function getLocalStorage() {
try {
if (!! window.localStorage) return window.localStorage;
} catch(e) {
return undefined;
}
}
function getAddEventListener() {
try {
if( !! window.addEventListener ) return window.addEventListener;
} catch(e) {
return undefined;
}
}
function eventHandler(e) {
alert("here we are = " + e.storageArea.traveler);
}
function testStorage() {
var db = getLocalStorage();
var addEL = getAddEventListener();
if(addEL) {
addEL('storage', eventHandler, false);
} else {
alert('This browser does not support event listeners');
}
db.setItem('traveler', 'Bill');
db.setItem('destination', 'Ventura');
db.setItem('transportation', 'Airplane');
document.getElementById('results').innerHTML = db.getItem('destination');
}
</script>
</head>
<body onload="testStorage();">
<div id="results"> </div>
</body>
</html>
It successfully insert items in the local storage and display result in 'results'-element, but eventHandler doesn't work. I refresh the browser windows and don't see any alert messages. Why?
Because storage events don't work for same window/tab. They are fired only for other windows/tabs that use same localStorage
. Try opening two separat tabs and in one insert some data to the localStorage
.
Here is a similar question that explains how localStorage
event works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With