Почему этот код не сохраняет данные в локальном хранилище (не определено) - PullRequest
0 голосов
/ 18 января 2020

При создании нового div с данными из формы ввода первый div сохраняет данные, которые я ввел, но затем, когда я ввожу новые данные, div отображает неопределенное значение. первая попытка вторая попытка
0: {name: "Milk", количество: "30"}
name: "Milk"
количество: "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>';
    }
}

Я переписываю код много раз, но он не работает.

1 Ответ

0 голосов
/ 18 января 2020

Попробуйте заменить 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>';
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...