loadItem（）;與localStorage（破）

Question

我有兩個函數saveItem（）和其他loadItem（）;但我需要看到我的項目「當我刷新頁面」時，我正在使用localStorage來保存這個JSON的數據。

var input = document.getElementById('input'); 

function newItem(list, itemText){ 
    var item = document.createElement('li'); 
    item.className = 'item'; 
    item.innerText = itemText; 
    list.appendChild(item); 
    saveItem(); 
} 

input.onkeyup = function(evt){ 
var key = evt.keyCode || evt.whitch; 
    if(key == 13){ 
     itemText = input.value; 
     console.log('createITem'); 
      if(!itemText || itemText == '' || itemText == ' '){ 
       return false; 
      } 
       newItem(document.getElementById('ul'), itemText); 
    } 
} 

function saveItem(){ 
    var items = document.querySelector('li.item'); 
    var data = Array.prototype.map.call(items, function(item){ 
     return [item.innerHTML]; 
    }); 
    localStorage.setItem('data', JSON.stringify(data)); 
} 

function loadItem(){ 
    var items = JSON.parse(localStorage.getItem('data')); 
    if(!items){ 
     return; 
    } 
    Array.prototype.map.call(items, function(item){ 
     return newItem(document.getElementById('content-memo'), item[0]); 
    }); 
} 

loadItem(); 

Answer 1

您確定saveItem正在工作嗎？您的代碼顯示您致電loadItem，但它不顯示您致電saveItem。無論如何，這就是你的問題所在。

如果您打開開發工具窗格並檢查localStorage（或者從控制檯，看看是否定義了localStorage.data），您應該看看它是否正常工作。如果沒有，那麼當然loadItem將無法​​按預期工作。

爲了map所有li.item S，你必須改變從線：

var items = document.querySelector('li.item'); 

要這樣：

var items = document.querySelectorAll('li.item'); 

querySelector只返回的第一個結果作爲一個DOM對象，你不能打電話給Array.prototype.map。你需要一個類似數組的對象。 queryItemSelectorAll爲您提供。

就目前而言，Array.prototype.map調用saveItem返回一個空數組。所以這就是在localStorage.data中設置的值 - 因此返回map函數loadItem。

除此之外，你還有其他麻煩嗎？