Question

.push 失败。无需本地存储即可工作

2021-12-26

59

javascript arrays

我无法将用户输入推送到本地存储。当我的 quizData 变量为空数组时，它可以正常工作，

let quizData = JSON.parse(localStorage.getItem('MyQuiz'));

将其改回此值也可以正常工作，因为（我假设）LS 中已经有信息，

let quizData = JSON.parse(localStorage.getItem('MyQuiz'));

但清除 LS 会导致它再次失败。如能得到任何帮助，我将不胜感激

let quizData = JSON.parse(localStorage.getItem('MyQuiz'));
const addQuiz = (ev) => {
  ev.preventDefault();

  let quizForm = {
    question: document.getElementById('question-input').value,
    a: document.getElementById('a-input').value,
    b: document.getElementById('b-input').value,
    c: document.getElementById('c-input').value,
    d: document.getElementById('d-input').value,
    correct: document.getElementById('correct-input').value,
  };

  quizData.push(quizForm);
  document.forms[0].reset();

  console.warn('added', { quizData });

  localStorage.setItem('MyQuiz', JSON.stringify(quizData));
};
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('submitForm').addEventListener('click', addQuiz);
  console.log(quizData);
});

错误 custom-questions.js:26

未捕获的 TypeError：无法读取 null 的属性（读取“推送”）在 HTMLButtonElement.addQuiz

Answer 1

如果 localStorage 中没有任何内容，您可以简单地将 quizData 设置为新数组。

let quizData = JSON.parse(localStorage.getItem('MyQuiz')) ?? [];

如果 quizData 在其他地方更新，最好在更新之前检索最新数组。因此，您可以在 addQuiz 中获取最新的 quizData 。

const addQuiz = (ev) => {
  ev.preventDefault();

  let quizForm = {
    question: document.getElementById('question-input').value,
    a: document.getElementById('a-input').value,
    b: document.getElementById('b-input').value,
    c: document.getElementById('c-input').value,
    d: document.getElementById('d-input').value,
    correct: document.getElementById('correct-input').value,
  };
  
  const quizData = JSON.parse(localStorage.getItem('MyQuiz')) ?? [];

  quizData.push(quizForm);
  document.forms[0].reset();

  console.warn('added', { quizData });

  localStorage.setItem('MyQuiz', JSON.stringify(quizData));
};

Answer 2

如果为空或未定义，则应将 quizData 初始化为空数组。

let quizData = JSON.parse(localStorage.getItem('MyQuiz')) || [];