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'を解析しようとしているなら、それは行います。 –

ここで固定し、コードですありがとう：localStorageで何もない場合

は

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

これは空の配列にissuesを設定します。私はまた中央の余分なラインを取り除いた。（入力ミスもありました（localStorge;ブラウザのコンソールを常に確認してください）

編集：これは実際にはほとんどタイプミスのようです。項目がlocalStorageにない場合、取得しようとするとnullが返され、JSONとして解析するとnullが返されます。

追加注：localStorageはオブジェクトを格納できます。格納するときはstringifyの必要はないので、ロードするときはparseにする必要はありません。

出典

2017-09-05 19:44:08

localStorageのjson.parseを使用しているときにinnerHTMLが機能しない

答えて

関連する問題