Javascript loadItem（）；使用本地存储（已断开）

我有两个函数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();

---

您确定

saveItem

正在工作吗？您的代码显示您正在调用

loadItem

，但它不显示您正在调用

saveItem

。无论如何，这就是你的问题所在

如果打开“开发工具”窗格并检查localStorage（或从控制台查看是否定义了

localStorage.data

），则应该查看它是否正常工作。如果没有，那么当然

loadItem

将无法按预期工作

为了

map

all

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

中设置的内容，也就是返回到

loadItem

中的

map

函数的内容

---

除此之外，您还有其他问题吗？

您有什么问题？@ianaya89我需要查看“浏览器上载”时创建的新项目。抱歉，我不明白您的意思。“浏览器上传”是什么意思？这是一个事件吗？我认为您与“加载”事件混淆了。@ianaya89当您更新网站时。：）我想你的意思是“刷新”网页？是的，我确实需要列表。appendChild（item）；并在saveItem（）之后；您是否尝试过在

saveItem

函数中将

querySelector

更改为

querySelectorAll

？它解决了您的问题吗？您必须按照我的建议，将代码从

querySelector

更改为

queryselectoral

。否则，它将不起作用。做出改变。然后解释发生了什么。好的，现在进行更改和测试。