从localStorage使用json.parse时，innerHTML无法正常工作

我试图找到这个答案，但是有太多的变量存在，所以我希望你们中的一些人能向我解释这里发生了什么。我有一个具有“issuesList”ID的div的基本HTML页面。从localStorage使用json.parse时，innerHTML无法正常工作

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body onload="foo();"> 
     <div id="issuesList"></div> 
     <script src="main.js"></script> 
    </body> 
</html>

这是我main.js：

function foo(){ 
    //var issues = JSON.parse(localStorge.getItem('issues')); 
    var issuesList = document.getElementById('issuesList'); 
    document.getElementById('issuesList').setAttribute("style", "color:red;") 
    issuesList.setAttribute("style", "color:red;"); 
    issuesList.innerHTML = 'XYZ'; 
}

的localStorage的是空的，所以它有没有 '问题' 的对象。

如果我将注释行注释掉，issuesList DOM元素将显示以红色书写的XYZ。如果我取消注释，那么issuesList元素保持为空。我不明白为什么会发生这种情况。另外，如果我向localStorage添加'issues'，并再次调用foo（）方法，'issuesList'元素中仍然没有显示任何内容。

谢谢

来源

2017-09-05 Ileana Profeanu

当您将JSON分析行取消注释时，您的控制台的外观如何？任何错误？我的猜测是JSON.parse失败，所以你的其他代码没有执行。 – Bango

错误将有效地阻止JS在其轨道上。如果你试图解析'undefined'，那就行了。 –

下面的代码，固定：

function foo(){ 
    var issues = JSON.parse(localStorage.getItem('issues') || "[]"); 
    var issuesList = document.getElementById('issuesList'); 
    issuesList.style.color = "red"; 
    issuesList.innerHTML = 'XYZ'; 
}

这将设置issues为空数组，如果没有什么在localStorage。我也删除了中间的多余线。（您还有一个错字：localStorge;总是检查您的浏览器控制台）

编辑：它实际上似乎主要归结为排字错误。如果该项目不在localStorage中，则尝试获取它返回null，并解析它，因为JSON也返回null。

附加说明：localStorage可以存储对象;在存储时不需要stringify，因此加载时不需要parse。

来源

2017-09-05 19:44:08

从localStorage使用json.parse时，innerHTML无法正常工作

回答

相关问题