title: iBooks: is it possible to use localStorage when importing a *.epub file?
body: <p>I'm trying to create a sample epub file that I can read in iBooks that will contain interactive content that iBooks will access via localStorage. I am able to get the localStorage piece working on the browser aok in chrome and firefox (not IE). </p>
  
  <p>I noted that the localStorage javascript bit does not work when the files have *.xhtml extensions, only *.html extensions. </p>
  
  <p>I am able to zip up the html, opf and ncx and get an epub that I can read in digital editions and only throw epubcheck errors related to javascript stuff. </p>
  
  <p>I first tried importing this to iBooks, and I could read it aok, but the form was not interactive. Then I googled and found a post saying that it need to to be in an iFrame, which I did. I was then able to enter text into the form, but the local storage bit did not work. </p>
  
  <p>Here are the 2 relevant html files: </p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body onLoad="writeStoredData( 'storedName' );" &gt;
  
  &lt;div epub:type="chapter"&gt;
  
  &lt;h1&gt;An HTML5 Ebook Sample&lt;/h1&gt;
  &lt;p&gt; A simple html5 form that uses local storage to hold user input info&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;Does a device retain the info when the user moves from page to page? &lt;/li&gt;
      &lt;li&gt;When the device is turned off and on?&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;In this simple form, the body has an onLoad attribute that calls a function to load     the "name" from local storage. When the user enters input from a form the value is updated.     When the user closes the page and opens it again the value is still there.&lt;/p&gt;
  &lt;br/&gt;
  
  &lt;div class="formContainer"&gt;
  &lt;iframe class="content" src="form.html"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="storedName"&gt;&lt;/div&gt;
  
  &lt;p&gt;Go to &lt;a href="ebook-sample-pg2.html"&gt;page 2&lt;/a&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      function writeStoredData( id ){
  
          var storedNameDiv = document.getElementById(id);
      storedNameDiv.innerHTML = "&lt;p&gt;The stored name is: &lt;span class='selected'&gt;"     + localStorage.getItem('somename') + "&lt;/span&gt;&lt;/p&gt;";
      }   
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the form: (this has the function that writes to localStorage)</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"&gt;
  &lt;head&gt;
  &lt;title&gt;Epub3 Test Input Form&lt;/title&gt;
  
  &lt;/head&gt;&lt;body&gt;
  &lt;form&gt;
  Please enter your name: &lt;input type="text" id="nameInput"/&gt;
  &lt;input type="submit" value="enter" onClick="writeLocal();"     onSubmit="window.location.reload()"/&gt;
  
  &lt;/form&gt;
  
  
  &lt;script&gt;
          function writeLocal(){
              var submittedName = document.getElementById('nameInput').value;
              // calling it 'somename' to indicate user defined key
              localStorage.setItem('somename', submittedName);
              writeStoredData( 'storedName' );
      }
  
  
      function writeStoredData( id ){
          var storedNameDiv = document.getElementById(id);
          storedNameDiv.innerHTML = "&lt;p&gt;The stored name is: &lt;span class='selected'&gt;"     + localStorage.getItem('somename') + "&lt;/span&gt;&lt;/p&gt;";
      }   
  &lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>and here is the manifest from the content.opf file: </p>
  
  <pre><code>  &lt;manifest&gt;
      &lt;item id="js" href="javascript/ebook-test.js" media-type="text/javascript"/&gt; 
      &lt;item href="form.html" id="form1" media-type="application/xhtml+xml"     properties="scripted"/&gt;
      &lt;item href="ebook-sample.html" id="page1" media-type="application/xhtml+xml" properties="scripted"/&gt;
      &lt;item href="ebook-sample-pg2.html" id="page2" media-type="application/xhtml+xml" properties="scripted"/&gt;
      &lt;item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/&gt;
      &lt;item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml"/&gt;
    &lt;/manifest&gt;
  </code></pre>
  
  <p>The bit written by javascript never appears at all. My next step is to try to create a file in iBooks Author, but was hoping to be able to do this with epub. I know that iBooks should be able to do this stuff, as most of the googling I did brought up tutorials for iBooks Author. </p>
  
  <p>Also, I tried various things with the javascript; most of the examples I saw had the code in a  tag at the bottom of the html file, but I tried in a separate *.js file, and in the head tag, made no difference. </p>
  
  <p>Any help greatly appreciated. 
  bp</p>