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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}