title: Accessing localStorage of an iFrame in an event callback?
body: <p>I'm trying to cheat a bit with localStorage. The spec defines that when a value in localStorage changes, all other open pages on the same domain receive a <strong>storage</strong> event callback. I would also like the event to fire on the page where the value was changed.</p>
  
  <p>I added a hidden iFrame to each page which loads an empty document from the same domain and tried using it as the target for the localStorage change (so technically the page that I'm looking at isn't the origin of the localStorage change)</p>
  
  <p>It works fine except for when I do the same thing inside an event callback...</p>
  
  <pre><code>function fnSetupMusicPlayerSection(i, oSection) {
      var oAudio, oLocalStorageFrame, oLocalStorageWindow;
  
      oAudio = oSection.querySelector('audio');
      oLocalStorageFrame = oSection.querySelector('iframe.local-storage-target');
      oLocalStorageWindow = oLocalStorageFrame.contentWindow || oLocalStorageFrame;
  
      oLocalStorageWindow.localStorage.setItem('loadSetter', '1111');
  
      oAudio.addEventListener('play', function(oEvent) {
          oLocalStorageWindow.localStorage.setItem('callbackSetter', '2222');
      });
  }
  </code></pre>
  
  <p><strong>loadSetter</strong> is successfully stored and all windows receive the <strong>storage</strong> event. When I click to play the audio I get the following error inside the callback - <strong>Uncaught DOMException: Failed to execute 'setItem' on 'Storage': access is denied for this document.</strong></p>
  
  <p>Is there anything I can do to solve this? I really don't want to have to write code to update the current page separately</p>
  
  <p><strong>Update</strong>: I don't know if I'm doing something wrong in the example I gave above but the code does seem to work inside <strong>some</strong> callbacks. I have an anchor on the page with a click event where I <strong>can</strong> set localStorage through the iFrame</p>