$(window).bind('storage', function (e) {
setInterval(function () {
console.log("storage");
var trenutnerelacije = $('#TrenutneRelacije');
var mesto = localStorage.getItem("mesto");
var ulica = localStorage.getItem("ulica");
if (e.originalEvent.key == "mesto") {
if (trenutnerelacije.html().split("-").splice(-1)[0].replace(/ *\([^)]*\) */g, "") != mesto) {
trenutnerelacije.append("-" + mesto + "(" + ulica + ")");
}
}
if (e.originalEvent.key == "ulica") {
if (trenutnerelacije.html().split("-").pop().match(/\((.*)\)/)[1].split(",").pop().replace(" ", "") != ulica) {
trenutnerelacije.append("(" + ulica + "," + ")");
trenutnerelacije.html(trenutnerelacije.html().replace(")(", ", ").replace(" )", "").replace(" ,", ", ").replace(",)", ")").replace("()", "").replace(/,,/g, "").replace(/\(\)/g, ""))
}
}
},1000);
});
<div>This code works, but only if first time click on localstorage change and after that works in my application if has been changed.
If used my code localStorage.setItem("mesto","test") in button in my application - works if first time click directly on my browser.</div> <div></div> <div>What can be problem?</div>
It seems like you are trying to use an html node "#TrenutneRelacije' to display the information when the localStorage changed.
You should bear in mind that the 'storage' event only happened to send to notification for every document object who share the same "Storage Object" which is stored in the same storage area,
but not for current one.
It means that you can not get the notification in the current page when you have changed a storage variable.
For more information about the "localStorage" attribute and the storage event, you can refer to below link:
However, since the javascript is dynamical language, you can do a workaround and rewrite the original function and attach it as an event to display the change.
More information, you can refer to below code.
Script:
<script type="text/javascript">
//Extract from Official, Still only work for other pages
$(window).bind('storage', function (e) {
document.querySelector('#my-key').textContent = e.originalEvent.key;
document.querySelector('#my-old').textContent = e.originalEvent.oldValue;
document.querySelector('#my-new').textContent = e.originalEvent.newValue;
document.querySelector('#my-url').textContent = e.originalEvent.url;
document.querySelector('#my-storage').textContent = JSON.stringify(e.originalEvent.storageArea);
});
//Below code creates an event for set item operation
var originalSetItem = localStorage.setItem;
localStorage.setItem = function (key, value) {
var event = new Event('itemInserted');
event.value = value;
event.key = key;
document.dispatchEvent(event);
originalSetItem.apply(this, arguments);
};
var localStorageSetHandler = function (e) {
alert('localStorage.set("' + e.key + '", "' + e.value + '") was called');
};
document.addEventListener("itemInserted", localStorageSetHandler, false);
function changeStorage() {
var value = document.getElementById("textChange").value;
window.localStorage.setItem("bgcolor", value);
console.log(window.localStorage.getItem("bgcolor"));
}
</script>
HTML:
You can open multiple pages and see the display information changed along with the change of your input.
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
Member
65 Points
194 Posts
How to detect if localstorage has been changed
Mar 08, 2020 09:21 PM|progy85|LINK
If used my code localStorage.setItem("mesto","test") in button in my application - works if first time click directly on my browser.</div> <div> </div> <div>What can be problem?</div>
Contributor
3020 Points
889 Posts
Re: How to detect if localstorage has been changed
Mar 09, 2020 10:32 AM|Sean Fang|LINK
Hi, progy85,
It seems like you are trying to use an html node "#TrenutneRelacije' to display the information when the localStorage changed.
You should bear in mind that the 'storage' event only happened to send to notification for every document object who share the same "Storage Object" which is stored in the same storage area, but not for current one.
It means that you can not get the notification in the current page when you have changed a storage variable.
For more information about the "localStorage" attribute and the storage event, you can refer to below link:
https://html.spec.whatwg.org/multipage/webstorage.html#send-a-storage-notification
However, since the javascript is dynamical language, you can do a workaround and rewrite the original function and attach it as an event to display the change.
More information, you can refer to below code.
Script:
<script type="text/javascript"> //Extract from Official, Still only work for other pages $(window).bind('storage', function (e) { document.querySelector('#my-key').textContent = e.originalEvent.key; document.querySelector('#my-old').textContent = e.originalEvent.oldValue; document.querySelector('#my-new').textContent = e.originalEvent.newValue; document.querySelector('#my-url').textContent = e.originalEvent.url; document.querySelector('#my-storage').textContent = JSON.stringify(e.originalEvent.storageArea); }); //Below code creates an event for set item operation var originalSetItem = localStorage.setItem; localStorage.setItem = function (key, value) { var event = new Event('itemInserted'); event.value = value; event.key = key; document.dispatchEvent(event); originalSetItem.apply(this, arguments); }; var localStorageSetHandler = function (e) { alert('localStorage.set("' + e.key + '", "' + e.value + '") was called'); }; document.addEventListener("itemInserted", localStorageSetHandler, false); function changeStorage() { var value = document.getElementById("textChange").value; window.localStorage.setItem("bgcolor", value); console.log(window.localStorage.getItem("bgcolor")); } </script>
HTML:
You can open multiple pages and see the display information changed along with the change of your input.
Demo: only for current page
Hope this can help you.
Best regards,
Sean