YUI 2: Storage Utility - Why aren't key/vals persisted from page to page

Question

Trying to use the YUI 2 Storage Utility and followed the example which worked (on the same page); but when I create a second page (say page2.html) and try to access the key I get null back for the value.

So on page1 one I call:

localStorageEngine.setItem('testText', 'this is a triumph (local storage engine)');

and if I use getItem on the same page I see it, but if I put on say page2.html:

alert(localStorageEngine.getItem('testText'));

I get back null. I thought this was the point. The following is what I've included in addition to jquery 1.4.2

src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/cookie/cookie-min.js&2.8.1/build/element/element-min.js&2.8.1/build/swf/swf-min.js&2.8.1/build/swfstore/swfstore-min.js&2.8.1/build/storage/storage-min.js"

Here's the bulk of my javascript code:

//YAHOO.util.Event.onDOMReady(function() {  
jQuery(document).ready(function() {

  var localStorageEngine;
  try {
    localStorageEngine = YAHOO.util.StorageManager.get(
        YAHOO.util.StorageEngineHTML5.ENGINE_NAME,
        YAHOO.util.StorageManager.LOCATION_LOCAL, 
        {   
            force: false,
            order: [
                YAHOO.util.StorageEngineHTML5,
                YAHOO.util.StorageEngineSWF,
                YAHOO.util.StorageEngineGears
            ]
        }
     );
  } catch(e) {
    YAHOO.log("No supported storage mechanism present.");
    localStorageEngine = false;
  }
  if(localStorageEngine) {
    localStorageEngine.subscribe(localStorageEngine.CE_READY, function() {
        localStorageEngine.setItem('testText', 'this is a triumph (local storage engine)');
        localStorageEngine.setItem('testNumber', 1234567890);
        localStorageEngine.setItem('testBoolean', true);
        alert(localStorageEngine.getItem('testText'));

        console.log("len: ", localStorageEngine.length);
        console.log("has key: ", localStorageEngine.hasKey("testText"));
    });
  }
});

---

---

EDIT:

Eric's answer (very helpful!) worked but it turned out in my case to be specifically the swf line (not using jquery document ready instead of yahoo's same). Here's the pertinent code which is pretty much otherwise the same:

//YAHOO.util.Event.onDOMReady(function() {  
jQuery(document).ready(function() {
  YAHOO.util.StorageEngineSWF.SWFURL = 'assets/swfstore2-8-1.swf';

EDIT 2 Apologies for the messy edits but I've come back to this post as I now need to implement and realized that the second page on Eric's example (though he may choose to take it down) is still setting the value before the get so it doesn't truly exemplify retaining the value between pages. So I added this to the 2nd page before the get and it went back to being null when I did an alert on the getItem:

/*
        localStorageEngine.setItem('testText', 'this is a triumph (local storage engine)');
        localStorageEngine.setItem('testNumber', 1234567890);
        localStorageEngine.setItem('testBoolean', true);
*/

essentially commenting out the set code on page 2. After reading more about the underlying DOM Storage object I see that it is tied to a particular domain. For example, if I do:

sessionStorage.setItem("name", "Rob");

on my local machine I get an operation not permitted but if I upload it to a server it works. Did the same with the storage utility examples and it also worked. So the gist is put it up on a server.

Answer 1

Rob,

I set up two test pages which are basically copy-and-paste from your instantiation code:

http://ericmiraglia.com/yui/demos/storage.php

When I go from one to the other I get the success popup each time.

The only significant difference between my code and yours is the omission of jQuery (note: this ultimately has no impact on functionality) and the addition of the SWF location (which is important as a fallback for browsers that don't support HTML5 storage; UPDATE: this is what solved the problem Rob was having). But I tested in Safari 5 and FF 3.6, so it should have just been using HTML5 support directly.

Do those pages work for you?

-Eric