加载项（）；使用 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.items，您必须将行更改为：

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

到这里：

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

querySelector 只会将第一个结果作为 DOM 对象返回，您不能在其上调用Array.prototype.map。你需要一个类似数组的对象。 queryItemSelectorAll 给你。

就目前而言，saveItem 中的 Array.prototype.map 调用返回一个空数组。这就是在localStorage.data 中设置的内容 - 以及在loadItem 中返回给map 函数的内容。

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