Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

An odd behavior with localStorage events in HTML5

DZone's Guide to

An odd behavior with localStorage events in HTML5

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Today I was looking into web storage (localStorage) feature introduced in HTML5. Most of the modern browsers provide means through which key/value pairs can be securely stored and retrieved for later use. Browser cookies can indeed be used for the storage of persistent data but are limited in capacity. Also with cookies, the data is transmitted in every HTTP request thereby making the web applications run slow. Unlike cookies, in local storage there is no limit on the size of the data and it is never transmitted to the web server unless an attempt is made to send it manually. Whenever the data in the storage area changes a ' storage' event is fired. This event is fired whenever the methods setItem(), removeItem(), or clear() are called on the localStorage object.


However, when I tried to use these methods to update the localStorage area, the storage event never fired:
 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>localStorage Test</title>  
   <script type="text/javascript" >  
   
    var storageHandler = function () {  
     alert('storage event 1');  
    };  
   
    window.addEventListener("storage", storageHandler, false);  
   
   </script>  
  </head>  
  <body>  
         
   <button id="addBtn"  
           onclick="localStorage.setItem('key1','value1')">  
           Add  
   </button>  
   <button id="clearBtn"  
           onclick="localStorage.clear()">  
           Clear  
   </button>  
  </body>  
 </html>  
The methods setItem and clear did change the storage area and I confirmed this by referring to the resources  section in chrome developer tools. This looked very odd, but on referring to the w3c specification I found this: " When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired". This meant that, the storage event would be fired in any other window\tab which used the same storage area.

Now on opening another tab and on clicking the Add\Clear button the localStorage area was affected and a storage event was fired in the other tab; not on the one that invoked the setItem or clear method. In a way this makes sense because the invoking window would already know of event and would perform the necessary action. Windows that share the same storage area would then be notified of the event and can update the DOM or perform the required action.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}