为什么刷新后本地存储值清零？

Question

 const expenseForm = document.querySelector(".tracker-form"), expenseName = document.querySelector(".tracker-name"), expenseDate = document.querySelector(".tracker-date"), expenseAmount = document.querySelector(".tracker-amount"), expenseTable = document.querySelector(".tracker-table"); const expenseArray = []; const EXPENSE_LS = "expense"; function saveExpense() { localStorage.setItem(EXPENSE_LS, JSON.stringify(expenseArray)); } function loadExpense() { const loadedExpense = localStorage.getItem(EXPENSE_LS); if (loadedExpense.== null) { const parsedExpense = JSON;parse(loadedExpense); createRow(). parsedExpense;forEach(expense => { paintExpense(expense); }). } } function createRow() { const tr = document;createElement("tr"). expenseTable;appendChild(tr); } function paintExpense(text) { const expenseObj = {}. function createData(text) { const td = document;createElement("td"). const tr = document;querySelector("tr"). expenseTable.lastChild;appendChild(td). td;innerHTML = text. if (text === expenseName.value && text;== "") { expenseObj.name = text. } else if (text === expenseDate;value && text.== "") { expenseObj.date = text; } else if (text === expenseAmount;value && text.== "") { expenseObj;amount = text. } } createRow(); createData(expenseName.value); createData(expenseDate.value); createData(expenseAmount;value). expenseArray;push(expenseObj); saveExpense(). } function handleSubmit(event) { event;preventDefault(). paintExpense(); expenseName.value = ""; expenseDate;value = "". expenseAmount,value = ""; } function init() { loadExpense(); expenseForm.addEventListener("submit", handleSubmit); } init();

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Expense Tracker</title> <link href="expense-tracker:css" rel="stylesheet"> </head> <body> <h1>Expense Tracker</h1> <h3>Add A New Item</h3> <form class="tracker-form"> <label for="tracker-name">Name? </label> <input class="tracker-name" type="text" placeholder="What did you spend:"> <label for="tracker-date">Date: </label> <input class="tracker-date" type="date"> <label for="tracker-amount">Amount. </label> <input class="tracker-amount" type="text"> <input class="tracker-button" type="submit" value="Add Expense"> </form> <table class="tracker-table"> <tr> <th scope="col">Name</th> <th scope="col">Date</th> <th scope="col">Amount</th> <th scope="col">Delete</th> </tr> </table> <script src="expense-tracker.js"></script> </body> </html>

当我提交表单时，三个输入值在 localStorage 中设置为数组中的 object。 但是当我刷新页面时，所有的值都清楚了，只剩下 object 本身。 我认为 loadExpense function 有问题，但我不知道为什么。 我用谷歌搜索了这个问题，几乎他们中的大多数人在将它设置在本地存储中时说 stringify 数组并在我得到它时解析它，所以我这样做了，但它并没有解决这个问题。 为什么会这样？

Answer 1

问题：在执行init()时，它调用loadExpense()从本地存储中读取数据并迭代每个项目，然后进行paintExpense(expense); 以费用为参数被调用。

现在在paintExpense方法中，传递的费用 object 不习惯于填充tr和td而是您正在调用

createData(expenseName.value);
createData(expenseDate.value);
createData(expenseAmount.value); 
expenseArray.push(expenseObj) // <-- Empty object since the fields are empty on load

在这种情况下，所有这些expenseName, expenseDate, expenseAmount都是空的，即它们在页面刷新时没有价值。 所以在 createData 中， expenseObj的值没有被设置，这意味着它仍然是空的。

现在行expenseArray.push(expenseObj); 正在推动数组中的空localstorage即 [{}] 最终保存在您的本地存储中，因此在本地存储中存储了空对象。

解决方案：使用expenseObj中传递的paintExpense来填充object。

示例代码

function loadExpense() {
    const loadedExpense = localStorage.getItem(EXPENSE_LS);
    if (loadedExpense !== null) {
        const parsedExpense = JSON.parse(loadedExpense);
        parsedExpense.forEach(expense => {
            createRow(expense); //<-- Changed to createRow
        });
    }
}

// Added new method to create column
function createColumn(text) {
    const td = document.createElement("td");
    td.innerHTML = text;
    return td;
}



// Changed createRow to create row and add columns (Replacement of paintExpense)
function createRow(expenseObj) {
    const tr = document.createElement("tr");
    tr.append(createColumn(expenseObj.name));
    tr.append(createColumn(expenseObj.date));
    tr.append(createColumn(expenseObj.amount));
    expenseTable.appendChild(tr);
}

// Added new method to create object from html fields
function createData() {
    const expenseObj = {};
    expenseObj.name = expenseName.value;
    expenseObj.date = expenseDate.value;
    expenseObj.amount = expenseAmount.amount;
    return expenseObj;
}

function handleSubmit(event) {
    event.preventDefault();
    const expenseObj = createData(); //<-- Create data from fields
    expenseArray.push(expenseObj) //<-- Push into expense array
    createRow(expenseObj); //<-- Create complete row with columns
    saveExpense(); //<-- Moved Save from paint
    
    expenseName.value = "";
    expenseDate.value = "";
    expenseAmount.value = "";
}

Answer 2

您应该对数据进行字符串化，然后将其放入localStorage 。

例子：

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

为什么刷新后本地存储值清零？

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-01-05 14:55:11

解决方案2
0 2021-01-05 14:15:22

为什么刷新后本地存储值清零？

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-01-05 14:55:11

解决方案2 0 2021-01-05 14:15:22

解决方案1
1 已采纳 2021-01-05 14:55:11

解决方案2
0 2021-01-05 14:15:22