iBooks: is it possible to use localStorage when importing a *.epub file?

问题

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).

I noted that the localStorage javascript bit does not work when the files have *.xhtml extensions, only *.html extensions.

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.

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.

Here are the 2 relevant html files:

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
</head>
<body onLoad="writeStoredData( 'storedName' );" >

<div epub:type="chapter">

<h1>An HTML5 Ebook Sample</h1>
<p> A simple html5 form that uses local storage to hold user input info</p>
<ul><li>Does a device retain the info when the user moves from page to page? </li>
    <li>When the device is turned off and on?</li>
</ul>
<p>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.</p>
<br/>

<div class="formContainer">
<iframe class="content" src="form.html"></iframe>
</div>
<div id="storedName"></div>

<p>Go to <a href="ebook-sample-pg2.html">page 2</a>
</p>
</div>

<script>
    function writeStoredData( id ){

        var storedNameDiv = document.getElementById(id);
    storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>"     + localStorage.getItem('somename') + "</span></p>";
    }   
</script>
</body>
</html>

and the form: (this has the function that writes to localStorage)

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Epub3 Test Input Form</title>

</head><body>
<form>
Please enter your name: <input type="text" id="nameInput"/>
<input type="submit" value="enter" onClick="writeLocal();"     onSubmit="window.location.reload()"/>

</form>


<script>
        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 = "<p>The stored name is: <span class='selected'>"     + localStorage.getItem('somename') + "</span></p>";
    }   
</script>

</body></html>

and here is the manifest from the content.opf file:

  <manifest>
    <item id="js" href="javascript/ebook-test.js" media-type="text/javascript"/> 
    <item href="form.html" id="form1" media-type="application/xhtml+xml"     properties="scripted"/>
    <item href="ebook-sample.html" id="page1" media-type="application/xhtml+xml" properties="scripted"/>
    <item href="ebook-sample-pg2.html" id="page2" media-type="application/xhtml+xml" properties="scripted"/>
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
    <item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml"/>
  </manifest>

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.

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.

Any help greatly appreciated. bp