Local Storage for communication
Local Storage for communication between browsers:
There are cases, when a same page was opened in multiple tabs/browser windows and an update in a page, will be reflected in all other windows instantly.
To achieve this, we can trap the storage event. This storage event will be fired when there is a change in storage object (setItem() / removeItem() / clear()). This event will be triggered across all the browser tab/windows.
addEvent(window, ‘storage’, function (event) {
if (event.key == ‘storage-key’) {
output.innerHTML = event.newValue;
}
});
You can see the event.key & event.newValue are used to retrieve the value. The properties in event object are
key the named key that was added, modified or removed.
oldValue the previous value or null for a new item.
newValue the new value or null for a removed item
url the page which called a method that triggered this change
Where this can be used :
For example, in a page listing customers with option to add a customer in popup window. When a new customer is added from the popup window, the parent window list can be updated instantly by tracking the storage event. Even in other opened pages, where the customers are loaded in a drop down, can be instantly updated, without polling the server.
Local Storage is smart. Right ?
Let’s store happiness in our local store & share it to all.
- Cassandra – A Linear Scalable Database for Output Messenger - November 20, 2014
- Tirunelveli to Mars - September 25, 2014
- Table Index – Part 2, Multiple Column Index - August 1, 2014
