爲什麼null在chrom的控制檯中顯示 - >應用程序 - > localStorage

Question

我使用的代碼遠遠低於，並且有null顯示在我的chrome的localStorage區域上的storeArrObj的實際值之前。這是爲什麼 ？

全碼

<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') === ""){是假的。
2. JSON.parse(localStorage.getItem('storageArrObj'));返回null。
3. 存儲在var parseStor =。
4. parseStor被推入storageArr：storageArr.push(parseStor);
5. storageArr，與在那裏的null，被存儲在localStorage。

解決方案？

替換：

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

隨着：

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

或用：

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