localStorage已保存但刷新后不显示闪卡问题求助

你的代码存在三个核心问题导致闪卡刷新后消失：

1. 定义的storedCards函数仅在表单提交事件内声明，但从未执行，导致提交的闪卡内容根本没存入localStorage
2. 页面加载时没有从localStorage读取已保存的闪卡内容并渲染
3. 直接通过innerHTML保存的HTML结构不包含事件绑定，刷新后恢复的闪卡无法触发显示/隐藏答案、删除功能

修复步骤 #

1. 全局化存储函数并确保触发时机 #

将storedCards函数移到全局作用域，在表单提交、卡片删除后都调用它，确保localStorage内容实时更新：

// 保存闪卡到localStorage
function storedCards() {
  localStorage.setItem('items', grid.innerHTML);
}

2. 页面加载时恢复闪卡 #

添加页面加载事件监听，读取localStorage中的内容并渲染到网格：

// 页面加载完成后恢复保存的闪卡
window.addEventListener('DOMContentLoaded', () => {
  const savedCards = localStorage.getItem('items');
  if (savedCards) {
    grid.innerHTML = savedCards;
  }
});

3. 使用事件委托替代元素绑定 #

原来的事件绑定是直接绑定到单个创建的元素上，恢复后的元素无法继承事件。改用事件委托绑定到网格容器，所有闪卡的交互事件都能生效：

// 事件委托处理显示/隐藏答案
grid.addEventListener('click', (e) => {
  if (e.target.textContent === 'Show/Hide Answer') {
    e.preventDefault();
    const answerElem = e.target.nextElementSibling;
    answerElem.classList.toggle('hidden');
    answerElem.classList.toggle('answer');
  }
});

// 事件委托处理删除卡片
grid.addEventListener('click', (e) => {
  if (e.target.id === 'deleteBtn') {
    const targetCard = e.target.closest('.card');
    grid.removeChild(targetCard);
    storedCards(); // 删除后更新存储
  }
});

4. 完善表单提交逻辑 #

在表单提交创建完闪卡后，调用storedCards保存内容，同时清空输入框：

form.addEventListener("submit", function submit(e) {
    e.preventDefault()

    // 创建元素的代码保持不变...

    // 清空输入框
    questionInput.value = '';
    answerInput.value = '';

    // 保存到localStorage
    storedCards();
})

修改后的完整代码 #

//Add Question button toggle and close button function
const addQuestionBtn = document.querySelector("#add-question")
const formContainer = document.querySelector(".hidden")
const closeBtn = document.querySelector("#close-btn")

addQuestionBtn.addEventListener("click", function addBtnToggle() {
    if (formContainer.className == "hidden") {
        formContainer.classList.remove("hidden")
        formContainer.classList.add("form-container")
    } else if (formContainer.className == "form-container") {
        formContainer.classList.remove("form-container")
        formContainer.classList.add("hidden")
    }
})

closeBtn.addEventListener("click", function closeForm() {
    if (formContainer.className == "form-container") {
        formContainer.classList.remove("form-container")
        formContainer.classList.add("hidden")
    }
})

//Form event listener / Creating cards to populate grid
const questionInput = document.querySelector("#question-input")
const answerInput = document.querySelector("#answer-input")
const saveBtn = document.querySelector("#save-btn")
const form = document.querySelector("form")
const grid = document.querySelector(".grid-cards")

// 保存闪卡到localStorage
function storedCards() {
    localStorage.setItem("items", grid.innerHTML)
}

// 页面加载完成后恢复保存的闪卡
window.addEventListener('DOMContentLoaded', () => {
  const savedCards = localStorage.getItem('items');
  if (savedCards) {
    grid.innerHTML = savedCards;
  }
});

// 事件委托处理显示/隐藏答案
grid.addEventListener('click', (e) => {
  if (e.target.textContent === 'Show/Hide Answer') {
    e.preventDefault();
    const answerElem = e.target.nextElementSibling;
    answerElem.classList.toggle('hidden');
    answerElem.classList.toggle('answer');
  }
});

// 事件委托处理删除卡片
grid.addEventListener('click', (e) => {
  if (e.target.id === 'deleteBtn') {
    const targetCard = e.target.closest('.card');
    grid.removeChild(targetCard);
    storedCards(); // 删除后更新存储
  }
});

form.addEventListener("submit", function submit(e) {
    e.preventDefault()

    //Creating elements
    let questionValue = questionInput.value
    let answerValue = answerInput.value
    let div = document.createElement("div")
    div.classList.add("card")
    let h3 = document.createElement("h3")
    h3.setAttribute("id", "question")
    const showHideAnswer = document.createElement("a")
    showHideAnswer.setAttribute("href", "")
    showHideAnswer.innerHTML = "Show/Hide Answer"
    let p = document.createElement("p")
    p.classList.add("hidden")
    let deleteBtn = document.createElement("button")
    deleteBtn.setAttribute("id", "deleteBtn")

    //Appending created elements to div
    grid.appendChild(div)
    div.append(h3)
    div.append(showHideAnswer)
    div.append(p)
    div.append(deleteBtn)
    h3.innerHTML = questionValue
    p.innerHTML = answerValue
    deleteBtn.innerHTML = "Delete"

    // 清空输入框
    questionInput.value = '';
    answerInput.value = '';

    // 保存到localStorage
    storedCards();
})

内容的提问来源于stack exchange，提问作者Chase Hudson