Home/ Questions/Q 8124183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T06:23:14+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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! 🙂

    • 0