Question

我有两个函数saveItem（）和其他函数到loadItem（）;但是我需要查看我的项目＆＃34;当我刷新页面时，我正在使用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。无论如何，这就是问题所在。

如果您打开Dev Tools窗格并检查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函数的内容。

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

loadItem（）;与localStorage（破碎）

1 个答案: