localStorage not working in IE9 and Firefox

Question

I am working with localStorage. My code is perfectly working in Chrome, but not in IE9 and Firefox.

Here is the code:

document.addEventListener("DOMContentLoaded", restoreContents, false);
document.getElementsByTagName("body")[0].onclick=function(){saveContents('myList','contentMain', event, this);};

function amIclicked(e, eleObject)
{
    alert("amIClicked");
    e = e || event;
    var target = e.target || e.srcElement;
    alert("target = " + target.id);
    if(target.id=='pageBody' || target.id=='Save')
        return true;
    else
        return false;
}

function saveContents(e, d, eveObj, eleObject) {
    //alert("saveContents");
    if (amIclicked(eveObj, eleObject)) {
        var cacheValue = document.getElementById(e).innerHTML;
        var cacheKey = "key_" + selectedKey;
        var storage = window.localStorage;
        //alert ("cacheKey = " + cacheKey + " ,cacheValue = " + cacheValue); 
        if(typeof(Storage)!=="undifined"){
        localStorage.setItem("cacheKey","cacheValue");
        }
        //alert ("Saved!!"); 
        var dd = document.getElementById(d);
        //document.getElementById("contentMain").style.display == "none";       
        dd.style.display = "none";
    }
}

function restoreContents(e,k) {
    //alert("test");
    if(k.length < 1) { return; }
    var mySavedList = localStorage["key_" + k];

    if (mySavedList != undefined) {
        document.getElementById(e).innerHTML = mySavedList;
    }
}


    <a onclick="ShowContent('contentMain','myList','Sample_1'); return true;" href="#" >Sample 1</a><br/><br/>
    <a onclick="ShowContent('contentMain','myList','Sample_2'); return true;" href="#" >Sample 2</a><br/><br/>

    <div style="display:none;display:none;position:absolute;border-style: solid;background-color: white;padding: 5px;"id="contentMain">
    <ol id="myList" contenteditable="true">
        <li>Enter Content here</li>
    </ol>
<!--<input id="editToggleButton" type="button" value="Edit"/>-->
</div>

when I tried to debug the code in Firefox with Firebug, I am getting the error in different line. I am totally confused here :)

Here is the code where I am getting the error:

function amIclicked(e, eleObject)
{
    alert("amIClicked");
    e = e || event;
    var target = e.target || e.srcElement;
    alert("target = " + target.id);
    if(target.id == 'pageBody' || target.id == 'Save'){
        return true;
    }
    else{
        return false;
    }
}

And the error I am getting in Mozilla Firefox is:

 target is undefined
[Break On This Error]   

alert("target = " + target.id);

I have declared the target in

<body id="pageBody">

too much confused

Answer 1

The way you're checking to see if localstorage exists is a bit unorthodox and may actually fail to detect that a legacy browser doesn't have localstorage. Below, you have typos in this code, such as "undifined":

var storage = window.localStorage;
//alert ("cacheKey = " + cacheKey + " ,cacheValue = " + cacheValue); 
if(typeof(Storage)!=="undifined"){
    localStorage.setItem("cacheKey","cacheValue");
}

Instead, here is the correct way to check if localStorage is available:

if(window.localStorage) { 
    localStorage.setItem("cacheKey","cacheValue"); 
}

With that said, that's not actually causing your problem in this case. Instead, you pointed out that the debugger found an error on this line:

if(k.length < 1) { return; }

You also see the following error:

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined sample_1.html, line 157 character 3

The key piece of information in that error message is that the object is null . In other words, you're passing in a null value as an argument for the parameter k!

The DOMContentLoaded event doesn't pass in this parameter; thus, it may be easiest for you to just simply use a global variable for now, something that you can access from within the restoreContents function.

Also, as @omri pointed out in his answer, +1 BTW, you're passing cacheKey into localStorage as a string and not as the actual variable that represents your key. This is the correct usage:

localStorage.setItem(cacheKey, cacheValue);

This may not be all of the problems in your code, but this should get you started. The best, most useful tip I can suggest for you, since I can tell you're new to this, is to learn how to use those browser debuggers and learn to recognize what error messages mean. Google the error messages if you have to. If you can learn to use these tools, you'll find it becomes much easier to recognize certain problems and then come up with a plan to resolve them. Good luck! :)

Answer 2

Does this work in any browser?! you've got "cacheValue" as a string, typeof Storage will never equal to "undifined" (undefined maybe), and the variable selectedKey was never defined.

Answer 3

I have tried several Steps :) for localstorage we need http then only it will work in IE9

But finally with the help of Tomcat i have created http: from there i have run the localstorage html file it was working fine .

Thanks for the people who supported me here

Thank you m

localStorage not working in IE9 and Firefox

Question

3 answers

solution1
3 ACCPTED 2012-06-24 20:42:47

solution2
2 2012-06-24 20:44:09

solution3
0 2012-07-06 12:08:37

localStorage not working in IE9 and Firefox

Question

3 answers

solution1 3 ACCPTED 2012-06-24 20:42:47

solution2 2 2012-06-24 20:44:09

solution3 0 2012-07-06 12:08:37

solution1
3 ACCPTED 2012-06-24 20:42:47

solution2
2 2012-06-24 20:44:09

solution3
0 2012-07-06 12:08:37