クロムのコンソール - >アプリケーション - > localStorageにヌルが表示されている理由

Question

私のクロームのlocalStorage領域のstoreArrObjの実際の値の前には、nullが表示されています。何故ですか ？

完全なコード

<label>First Name: </label><input type="text" id="firstNameSto"><br> 
<label>Last Name: </label><input type="text" id="lastNameSto"><br> 
<button type="submit" id="fetchDetails">Submit and Display</button> 
<div id="displayStorage"></div> 

<script> 
    document.getElementById('fetchDetails').addEventListener('click',storageFunction); 
    function storageFunction(){ 
     var firstNameSto = document.getElementById('firstNameSto').value; 
     var lastNameSto = document.getElementById('lastNameSto').value; 
     var storageArr = []; 
     var storageObj = { 
      firstName: firstNameSto, 
      lastName: lastNameSto 
     } 
     if (localStorage.getItem('storageArrObj') === ""){ 
      storageArr.push(storageObj); 
      var storeObj = JSON.stringify(storageArr); 
      localStorage.setItem('storageArrObj', storeObj); 
     } else { 
      var parseStor = JSON.parse(localStorage.getItem('storageArrObj')); 
      storageArr.push(parseStor); 
      storageArr.push(storageObj); 
      var storeObj = JSON.stringify(storageArr); 
      localStorage.setItem('storageArrObj',storeObj); 
     } 
     console.log(localStorage.getItem('storageArrObj')); 

    } 
</script> 

Answer 1

あなたはこのコードを最初に実行するとき、localStorage['storageArrObj']はまだ存在しません：

1. if (localStorage.getItem('storageArrObj') === ""){はfalseです。
2. JSON.parse(localStorage.getItem('storageArrObj'));は、nullを返します。
3. var parseStor =に格納されています。
4. parseStorがstorageArrに押し込まれる：storageArr.push(parseStor);
5. storageArr、そこでnullと、localStorageに格納されています。

解決策？

置換：

if (localStorage.getItem('storageArrObj') === null){ 

またはで：

if (localStorage.getItem('storageArrObj') === ""){ 

で

var stored = localStorage.getItem('storageArrObj'); 
if (stored === null || stored === ""){