HTML5 sessionStorage method - Post ID...

Oct 22nd, 2010 at 10:48 PM
User 399197 Photo

Dick Raymond
Registered User
46 posts

I'm using CC HTML Editor SE to experiment with HTML5's sessionStorage and localStorage methods to migrate information from one web page to another. In my case, I have a need to be able to select one of many essays contained on a web page and then print just that one essay. I wanted to show the essay text on a pre-formatted page with some custom page header, etc. I soon discovered that passing information in the form of a variable from one document to another was very difficult.

I was trying to use JavaScript to replace the innerHTML of the receiving element on the template document with the innerHTML of the reference essay of the master document. To be blunt: I was unable to accomplish this. I did a LOT of Googling, and discovered that it simply wasn't possible to accomplish it in this manner. Therefore, I reverted to a very cumbersome method of implementing the docment.write method to create a whole new web page and then writing all the HTML for that page, including all the styling, etc. You can see the results here http://www.inlandrail.org/editorial_page.html. Just browse to any essay, and then press the "Printable version" button for that essay. The results are good, but as I mentioned, cumbersome. It would be great to have a fully formatted document that I could just pass the essay text to.

Here's where HTML5 shines. It includes the sessionStorage and localStorage methods, wherein you can write anything (any number of variables) to the sessionStorage or localStorage object, and then retrieve them later in any document that calls them. Sweet. I created an implementation scheme as follows:

1. In the "parent" document, when I press the "Printable version" button it calls the following script to parse out the appropriate essay and copyright specifier:

function print_essay(essay_to_print, print_copyright)
{
var name_to_print="print_" + essay_to_print;
sessionStorage.stuff_to_print=document.getElementById(name_to_print).innerHTML;
sessionStorage.copyrightyesno=print_copyright;
window.open('target_page-sessionStorage.html', '', 'left=0, width=800, height=600, menubar=yes, resizable=yes, scrollbars=yes, status=yes, toolbar=yes', '');
}


2. In the template document, I then retrieve the stored information using the following script called using <body onload="get_information()">:

function get_information()
{
//display the copyright, if called for
if (sessionStorage.copyrightyesno!=0)
{
document.getElementById("copyright_area").style.visibility="visible";
}
else
{
document.getElementById("copyright_area").style.visibility="hidden";
}
//insert the essay, itself
document.getElementById("essay_area").innerHTML=sessionStorage.stuff_to_print;
}


The good news: it works GREAT in Chrome and Safari (these both use the WebKit engine). but fails in Firefox, IE8 and Opera. In IE8 I receive the following error: 'sessionStorage' is null or not an object. I've Googled MUCH to discover what I may have done or omitted, but continue to come up empty. I'll keep trying to figure it out.

The main purpose of this post was to share about this powerful feature of HTML5. And, you are probably aware there are many more. Things are definitely looking up!

If you have any idea as to why my code is not working in IE8, I'd love to hear about it.

Dick Raymond
Oct 24th, 2010 at 02:06 PM
User 399197 Photo

Dick Raymond
Registered User
46 posts

UPDATE:

I'm happy to report that I've completed my experimenting, and verified that HTML web storage, as implemented using either the sessionStorage or the localStorage method, works great for passing either small or large amounts of information from one document to another. I successfully implemented my "Printable version" scheme in all five major browsers. :)

Here's what I discovered:
1. OPERA: In order to make Opera happy, I had to use the localStoage method instead of the sessionStorage method. There are nuances as to how each method (and each browser, for that matter) handles web storage with respect to cross-tab communication. With the localStorage thing handled, Opera successfully served the pages locally when invoked from within the CC HTML editor.

2. IE8: oddly, IE8 could not deal with things locally when invoked from within the CC HTML editor. I ended up pushing the trial pages up onto the server to see what would happen, and voila...they worked as intended. However, I discovered a few other things:

a. CC inserts some code in the <head> section to call a Google-hosted JavaScript (html5.js). This link is called HTML5 Shim, and it helps translate HTML5 for IE so it can render pages correctly. Anyhow, sometimes my target document would "hang" when opened, so I went to the Google site and downloaded the script and placed it in the directory along with my two experimental pages. This eliminated the hangs. Actually, the script is not even needed for implementing web storage in IE8.

b. During my machinations, I discovered a significant, albeit esoteric glitch in the CC HTML editor that can have serious repercussions. I'll bring this up in an appropriate thread.

3. FIREFOX: Firefox also could not deal with things locally when invoked from within the CC HTML editor, but worked great when dealing with the pages on the server.

4. CONCLUSION: for now, it may be prudent to utilize the localStorage method instead of sessionStorage.

Anyhow, I'm happy. HTML5 web storage opens up some really great possibilities for client-side processing.

Dick Raymond

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.