为什么此代码不将数据保存在本地存储中（未定义）答案

【问题标题】：Why isn't this code save data in local storage (undefined)为什么此代码不将数据保存在本地存储中（未定义）
【发布时间】：2020-05-05 04:04:52
【问题描述】：

使用输入表单中的数据创建新 div 时，第一个 div 保存我输入的数据，但接下来，当我输入新数据时，div 显示未定义的值。 first attempt second attempt
0：{名称：“牛奶”，金额：“30”}
名称：“牛奶”
金额：“30”
1：“费用”
2：“费用”
3：“费用”

document.getElementById('expenseInput').addEventListener('submit', saveExpense);

function saveExpense(e) {
    let expenseName = document.getElementById('expenseNameInput').value,
        expenseAmount = document.getElementById('expenseAmountInput').value;

    let expenseStorage = {
        name: expenseName,
        amount: expenseAmount,
    }

    if (localStorage.getItem('expenses') == null) {
        let expenses = [];
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    } else {
        let expenses = JSON.parse(localStorage.getItem('expenses'));
        expenses.push('expenseStorage');
        localStorage.setItem('expenses', JSON.stringify(expenses));
    }

    document.getElementById('expenseInput').reset();
    fetchExpense();

    e.preventDefault();
}

function fetchExpense() {
    let expenses = JSON.parse(localStorage.getItem('expenses')),
        expensesList = document.getElementById('expensesList');

    expensesList.innerHTML = '';

    for (let i = 0; i < expenses.length; i++) {
        let name = expenses[i].name,
            amount = expenses[i].amount;

        expensesList.innerHTML +=   '<div class="well" id="expense-item">' +
                                    '<h3>' + name + '</h3>' +
                                    '<h3>' + amount + '</h3>' +
                                    '<a href="#" onclick="deleteExpense()" class="btn btn-danger">Delete</a>' +
                                    '</div>';
    }
}

我多次重写代码，但它不起作用。

【问题讨论】：

如果您将代码放入工作示例中会很好（请参阅工具栏中的图标）

标签： javascript html json dom

【解决方案1】：

尝试将expenses.push('expenseStorage') 替换为expenses.push(expenseStorage)。所以您的代码将如下所示：

document.getElementById('expenseInput').addEventListener('submit', saveExpense);

function saveExpense(e) {
    let expenseName = document.getElementById('expenseNameInput').value,
        expenseAmount = document.getElementById('expenseAmountInput').value;

    let expenseStorage = {
        name: expenseName,
        amount: expenseAmount,
    }

    if (localStorage.getItem('expenses') == null) {
        let expenses = [];
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    } else {
        let expenses = JSON.parse(localStorage.getItem('expenses'));
        expenses.push(expenseStorage);
        localStorage.setItem('expenses', JSON.stringify(expenses));
    }

    document.getElementById('expenseInput').reset();
    fetchExpense();

    e.preventDefault();
}

function fetchExpense() {
    let expenses = JSON.parse(localStorage.getItem('expenses')),
        expensesList = document.getElementById('expensesList');

    expensesList.innerHTML = '';

    for (let i = 0; i < expenses.length; i++) {
        let name = expenses[i].name,
            amount = expenses[i].amount;

        expensesList.innerHTML +=   '<div class="well" id="expense-item">' +
                                    '<h3>' + name + '</h3>' +
                                    '<h3>' + amount + '</h3>' +
                                    '<a href="#" onclick="deleteExpense()" class="btn btn-danger">Delete</a>' +
                                    '</div>';
    }
}

【讨论】：

好的，很好