Question

我正在使用localStorage。我的代码完全适用于Chrome，但不适用于IE9和Firefox。

以下是代码：

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>

当我尝试使用Firebug在Firefox中调试代码时，我收到的错误在不同的行中。我在这里完全糊涂了:)）

以下是我收到错误的代码：

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;
    }
}

我在Mozilla Firefox中遇到的错误是：

 target is undefined
[Break On This Error]   

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

我在

中声明了目标

<body id="pageBody">

太混淆了

Answer 1

您检查localstorage是否存在的方式有点不正统，实际上可能无法检测到旧版浏览器没有localstorage。下面，您在此代码中有拼写错误，例如“undifined”：

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

相反，这是检查localStorage是否可用的正确方法：

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

话虽如此，在这种情况下，实际上并没有导致你的问题。相反，您指出调试器在此行上发现错误：

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

您还会看到以下错误：

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

该错误消息中的关键信息是对象为空。换句话说，您传入一个空值作为参数k！

的参数

DOMContentLoaded事件未传入此参数;因此，现在最简单地使用全局变量可能是最简单的，您可以在restoreContents函数中访问它。

另外，正如@omri在他的回答中指出的那样，+ 1 BTW，你将cacheKey作为字符串传递给localStorage而不是代表你的密钥的实际变量。这是正确的用法：

localStorage.setItem(cacheKey, cacheValue);

这可能不是您代码中的所有问题，但这应该可以帮助您入门。我可以为您推荐的最好，最有用的提示，因为我可以告诉您对此的新内容，是学习如何使用这些浏览器调试器并学习识别错误消息的含义。谷歌的错误信息，如果你不得不。如果您可以学习使用这些工具，您会发现识别某些问题变得更加容易，然后提出解决问题的计划。祝好运！：）

Answer 2

这适用于任何浏览器吗？！你有“cacheValue”字符串， typeof存储永远不会等于“unifined”（未定义），并且从未定义变量selectedKey。

Answer 3

我已尝试过几个步骤:)对于本地存储我们需要http然后它只能在IE9中工作

但最后在Tomcat的帮助下我创建了http：从那里我运行了localstorage html文件，它运行正常。

感谢支持我的人们

谢谢米

localStorage无法在IE9和Firefox中运行

3 个答案: