JavaScript数组赢得'；t更新和can'；不要在输入中键入任何内容

当我在我的expense manager网站上单击“创建便笺”按钮时，会出现编辑页面，但仍在尝试重新加载，我无法在任何输入中键入任何内容

我收到一个错误：“无法读取未定义的”属性“title”和一条消息：“限制导航以防止浏览器挂起。”。命令行开关——禁用ipc泛洪保护可用于绕过保护的

我希望能够创建一个费用，并看到它更新时，我返回到主页，但我甚至不能键入任何东西，也不会有任何更新无论如何

//JS代码

// Read existing expenses from localStorage
const getSavedExpenses = function () {
    const expensesJSON = localStorage.getItem('expenses')

    if (expensesJSON !== null) {
        return JSON.parse(expensesJSON)
    } else {
        return []
    }
}
// Save expenses to localStorage
const saveExpenses = (expenses) => {
    localStorage.setItem('expenses', JSON.stringify(expenses))
}

const titleElement = document.querySelector('#expense-title')
const bodyElement = document.querySelector('#expense-body')
const removeElement = document.querySelector('#remove-note')
const expenseId = location.hash.substring(1)
const expenses = getSavedExpenses()
const expense = expenses.find(function (expense) {
    return expense.id === expenseId
})

// Get the DOM elements for an individual expense
const generateExpenseDOM = function (expense) {
    const expenseEl = document.createElement('div')
    const textEl = document.createElement('a')
    const removeButton = document.createElement('button')

// Setup the expense text
if (expense.title.length > 0) {
    textEl.textContent = expense.title
} else {
    textEl.textContent = 'Unnamed note'
}
textEl.setAttribute('href', `expense-edit.html#${expense.id}`)
expenseEl.appendChild(textEl)


// Remove expense by id
const removeExpense = function (id) {
const expenseIndex = expenses.findIndex(function (expense) {
return expense.id === id
})
if (expenseIndex > -1) {
    expenses.splice(expenseIndex, 1)
  }
}

// Setup the remove expense button
removeButton.textContent = 'x'
expenseEl.appendChild(removeButton)
removeButton.addEventListener('click', function () {
    removeExpense(expense.id)
    getSavedExpenses(expenses)
    renderExpenses(expenses, filters)
})
return expenseEl
}

//HTML代码

除去费用

提交

有两个地方可以使用导航到新页面的

location.assign（）

我猜这一个一直在触发：

if (expense === undefined) {
    location.assign('expense-edit.html')
}

费用

未定义，因此页面将重新加载<代码>费用未定义，因此页面将重新加载

找出

费用

没有值的原因。（您也可以将这些行注释掉，以确认这实际上就是问题所在。）

---

更新：此外，我认为您假设变量（如

费用

数组）在页面加载中持续存在。JS变量不会在页面加载期间保持不变。调用

location.assign（）

后，所有JS变量都会重置

因此，这部分代码实际上没有做任何事情：

expenses.push({
     id: id,
     title: '',
     body: ''
  })

我不确定在

getSavedExpenses（）

中会发生什么，我想可能是通过或其他方式将变量保存在那里的。（否则，这可能也是死代码，因为它的返回值甚至没有被使用。）

有两种方法可以跨“页面加载”持久化数据：

将数据保存到持久性存储，如数据库或本地存储。然后在下次加载页面时重新加载数据。如果使用数据库，通常表单中的数据通过API请求发送到数据库服务器

不要重新加载页面；通过JS修改页面DOM（因此看起来可能像“重新加载”的页面）

更新2:

TypeError:无法将属性“value”设置为null

此错误是由于尝试访问值为

null

的变量上名为

value

的属性而导致的。在您的代码中，这发生在两个地方：

titleElement.value = expense.title
bodyElement.value = expense.body

---

遇到错误后，JS停止执行。这可能是localStorage.getItem（'expenses'）结果为空的原因。

有两个地方可以使用导航到新页面的

location.assign（）

我猜这一个一直在触发：

if (expense === undefined) {
    location.assign('expense-edit.html')
}

费用

未定义，因此页面将重新加载<代码>费用未定义，因此页面将重新加载

找出

费用

没有值的原因。（您也可以将这些行注释掉，以确认这实际上就是问题所在。）

---

更新：此外，我认为您假设变量（如

费用

数组）在页面加载中持续存在。JS变量不会在页面加载期间保持不变。调用

location.assign（）

后，所有JS变量都会重置

因此，这部分代码实际上没有做任何事情：

expenses.push({
     id: id,
     title: '',
     body: ''
  })

我不确定在

getSavedExpenses（）

中会发生什么，我想可能是通过或其他方式将变量保存在那里的。（否则，这可能也是死代码，因为它的返回值甚至没有被使用。）

有两种方法可以跨“页面加载”持久化数据：

将数据保存到持久性存储，如数据库或本地存储。然后在下次加载页面时重新加载数据。如果使用数据库，通常表单中的数据通过API请求发送到数据库服务器

不要重新加载页面；通过JS修改页面DOM（因此看起来可能像“重新加载”的页面）

更新2:

TypeError:无法将属性“value”设置为null

此错误是由于尝试访问值为

null

的变量上名为

value

的属性而导致的。在您的代码中，这发生在两个地方：

titleElement.value = expense.title
bodyElement.value = expense.body

---

遇到错误后，JS停止执行。这可能就是为什么

localStorage.getItem（'expenses'）

结果为空。

谢谢您的回答，这似乎是个问题，因为当我将它们注释掉时，页面加载良好，我仍然得到错误，数据仍然没有保存。我不明白为什么“费用”没有值。@RJDEV：我添加了一个更新，可能会让您更了解情况。@RJDEV：如果您从事件处理程序中注释掉

location.assign

，我想您会看到数据已保存。（它刚刚在导航栏上被立即丢弃。）@RJDdev:你评论了整行吗？我现在看到

getSavedExpenses（）

使用本地存储。有一个

localStorage.getItem

。但是，也应该有一个匹配的

localStorage.setItem

，可能是在一个名为

saveExpenses（）

的方法中。感谢您的更新，我不太理解您关于持久数据的意思。当我注释出location.assign时，网站崩溃。我已经在我的问题中添加了一些代码，包括getSavedExpenses（）函数。谢谢你的回答，这似乎是个问题，因为当我对它们进行注释时，页面加载很好，我仍然得到了错误，数据仍然没有保存。我不明白为什么“费用”没有值。@RJDEV：我添加了一个更新，可能会让您更了解情况。@RJDEV：如果您从事件处理程序中注释掉

location.assign

，我想您会看到数据已保存。（它刚刚在导航栏上被立即丢弃。）@RJDdev:你评论了整行吗？我现在看到

getSavedExpenses（）

使用本地存储。存在一个

localStorage.getItem