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
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 edited Aug 8, 2012 at 6:17 hippietrail 17k21 gold badges109 silver badges179 bronze badges asked Jun 24, 2012 at 20:23 mahamaha 391 silver badge9 bronze badges 13-
1
Could the typo perhaps be causing your issue?
if(typeof(Storage)!=="undifined"){Undefined is spelled wrong. Not sure how that's working in Chrome. Is this your actual, real code? – jamesmortensen Commented Jun 24, 2012 at 20:28 - 1 Are you working on localhost? localstorage is only available on HTTP websites. – eric.itzhak Commented Jun 24, 2012 at 20:28
- 1 @eric.itzhak localhost is through http(I've used localStorage on localhost), you probably mean filesystem – Musa Commented Jun 24, 2012 at 20:32
-
@eric.itzhak -
file://!=http://localhost. Where it doesn't work is when there is no webserver at all, and you're using the file protocol. Localhost still uses http and should work. – jamesmortensen Commented Jun 24, 2012 at 20:32 - 1 i meant filestystem, my bad :) – eric.itzhak Commented Jun 24, 2012 at 20:34
3 Answers
Reset to default 3The 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 bees much easier to recognize certain problems and then e up with a plan to resolve them. Good luck! :)
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.
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