Saving on localStorage from an HTML Imports file
<p>I'm using HTML imports,  as a vehicle to dynamically inject content on a website.  It works,  perfect,  there is a good <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/" rel="nofollow">article</a> 
which exposes the use of imports on both files and templates.  </p>

<p>Indeed there are few other articles, but Bidelman's is the most extensive.  It covers scripting in imports.  However, being able to render the imported content and being able to run scripts,  I cannot make it save data on the local storage.</p>

<p>I can run scripts from the imported file,  in the importer file,  like an alert.  However is impossible to catch the data I need to store and store it.  How can this be achieved?  Here is a sample of my code.</p>

<p>I have a simple select whose id is dim_city. The script to capture value on change and store on localstorage is very simple:</p>

<pre><code> var ie = importDoc.querySelector('#dim_city');   // capture the selector value.
   function getData() {
   var idc=ie.options[ie.selectedIndex].value;
   var  dataCi=(idc);
   localStorage.setItem("ic", dataCi);
   var storedData = localStorage.getItem(dataCi);

   mainDoc.body.appendChild(dataCi.cloneNode(true)); // this adds tha captured data to importer file.
 }    
</code></pre>

<p>As a single file,  it runs fine and stores data on the localStorage.  When imported,  it runs scripts,  like alert,  but cannot store on localStorage.</p>

<p>Obviously the browser is supporting HTML Imports.  </p>