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。

除此之外，你还有其他麻烦吗？