0

我正在使用本地存储。我的代码在 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">

太迷茫

4

3 回答 3

3

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

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

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

DOMContentLoaded 事件没有传入这个参数；因此，对于您来说，现在最简单的方法可能是简单地使用全局变量，您可以从restoreContents函数内部访问它。

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

localStorage.setItem(cacheKey, cacheValue);

这可能不是您代码中的所有问题，但这应该可以帮助您入门。我可以为您建议的最好、最有用的提示是学习如何使用这些浏览器调试器并学习识别错误消息的含义，因为我可以告诉您是新手。如有必要，请谷歌错误消息。如果你能学会使用这些工具，你会发现识别某些问题并想出解决这些问题的计划会变得容易得多。祝你好运！:)

于 2012-06-24T20:42:47.747 回答
2

这在任何浏览器中都有效吗？！您将“cacheValue”作为字符串，typeof Storage 永远不会等于“未定义”（可能未定义），并且从未定义变量 selectedKey。

于 2012-06-24T20:44:09.783 回答
0

我已经尝试了几个步骤 :) 对于 localstorage 我们需要 http 然后它只能在 IE9 中工作

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

感谢在这里支持我的人

谢谢你

于 2012-07-06T12:08:37.190 回答