Javascript localStorage，我似乎无法调用数据

我试图保存我的待办事项列表上的数据，我将项目推送到一个对象中，我将其“字符串化”和“解析”。。。 但我不太确定如何调用保存的数据

而且似乎这些项目根本没有进入本地存储

---

我还没有看到那个API

我使用Mozilla网站上列出的内容

在本例中，显示为

get

和

set

正常

检查

控制台中的日志

根据下面的注释-精确单击处理程序已更改

var dataArray = [];
localStorage.itemListRecord = JSON.stringify(dataArray);
dataArray = JSON.parse(localStorage.itemListRecord);

var dataObj = {
    listItem: textInput,
};
dataArray.push(dataObj);

我注意到，当脚本启动时，您会立即清除正在使用的localStorage.itemListRecord位置，然后再尝试读取它。因此，在初始化时它将始终为空，并且此脚本将永远无法使用存在的内容：

// Add value from the input field
document.getElementById("new-btn").addEventListener('click', function() {
    var itemValue = document.getElementById("my-input").value;
    if (itemValue) {
        listTodoItem(itemValue);
        localStorage.setItem('data', JSON.stringify(itemValue));
        console.log(localStorage.getItem('data'));
    }
});

另外，我注意到，当添加新的todo列表项时，还没有任何代码将添加到本地存储：

// Data Object
var dataArray = [];
// CHANGED: I commented out the line below so that the localstorage is not cleared
// localStorage.itemListRecord = JSON.stringify(dataArray);
dataArray = JSON.parse(localStorage.itemListRecord);

// CHANGED: added these lines only for debugging
console.log('existing data');
console.log(dataArray);

请注意，即使进行了这些更改，列表仍然不能反映本地存储中的内容，因为它不会根据dataArray中的内容构建初始无序列表。还需要为此添加更多代码

但是根据我在这里提出的建议，在重新运行JSFIDLE时查看控制台日志中的输出，您应该能够看到localstorage部分正在工作，并且您可以克服这一点。
这个示例应该可以工作

function listTodoItem(textInput) {

    var dataObj = {
        listItem: textInput,
    };
    dataArray.push(dataObj);

    // CHANGED: added this line to update localstorage whenever an items is added to the list
    localStorage.itemListRecord = JSON.stringify(dataArray);

      // CHANGED: added these lines only for debugging
    console.log(dataArray);
    console.log(dataObj);

localStorage.itemListRecord=..
不是在本地存储中存储东西的方式。@Amy我也这么想，但我在最新的Mozilla Firefox浏览器的控制台中进行了试验，您可以通过这种方式存储和检索东西。这是新功能吗？啊，你是对的，你可以这样做。MDN有这样一个警告：“注意：建议使用Web存储API（setItem、getItem、removietem、key、length）来防止使用普通对象作为键值存储的陷阱。”请解释您所做的更改。因为你的答案实际上并没有回答这个问题。我同意其他人关于使用getItem和setItem接口到localStorage的说法，如Yea中所述，我改变了这一点，它工作了，但你会称之为“丑陋的代码”的说法，这只是为了看看本地存储是否工作。我确信您计划在完成之前将代码变得更漂亮：-）
var textInput = "example";
var dataObj = {
    listItem: textInput,
};
var dataArray = [];

dataArray.push(dataObj);    
localStorage.setItem("itemListRecord", JSON.stringify(dataArray));

dataArray = JSON.parse(localStorage.getItem("itemListRecord"));    
dataArray.push(dataObj);
localStorage.setItem("itemListRecord", JSON.stringify(dataArray));