StorageEvent

The storage event is fired on a document's Window object when a storage area changes. When a user agent is to send a storage notification for a Document, the user agent must queue a task to fire an event named storage at the Document object's Window object, using StorageEvent.

by Yashwanth M

HTML

Value in localStorage.counter:
<input type="text" id="count">
<br> Event Listener:
<input type="text" id="eventValue">

CSS

input {
  -webkit-appearance: textfield;
  -webkit-writing-mode: horizontal-tb;
  background-color: white !important;
  padding: 2px 5px !important;
  text-shadow: none !important;
  word-wrap: break-word;
  word-break: break-all;
}

/*input:focus {
	border:0px solid #AAB3F5 !important;
  overflow: auto !important;
}*/

JavaScript

/* global window, document */
var storageUpdateHandler = function(e) {
  document.getElementById('value').value = e.newValue;
  var eventResult = 'Key[' + e.key + "], oldValue[" +
    e.oldValue + ', newVlaue[' + e.newValue + '], current origin[' +
    e.url + '], storageArea[' + JSON.stringify(e.storageArea) + ']';

  document.getElementById('eventValue').value = eventResult;
};

window.addEventListener('storage', storageUpdateHandler);