本文教你为表单提交的词汇卡片（flashcard）添加 localstorage 持久化功能：确保页面刷新后数据不丢失，并自动重建所有已保存的卡片，同时避免代码重复、提升可维护性。
本文教你为表单提交的词汇卡片（flashcard）添加 localstorage 持久化功能：确保页面刷新后数据不丢失，并自动重建所有已保存的卡片，同时避免代码重复、提升可维护性。
在当前代码中，localStorage 确实已正确保存数据（可通过浏览器开发者工具 → Application → Local Storage 验证），但问题在于：页面加载时并未将已存储的数据渲染为 DOM 卡片。loadData() 只将数据读回 myVocab 数组，却缺少“把数组里每个词汇对象画成卡片”的逻辑。
解决思路很清晰：提取卡片渲染逻辑为独立函数，并在两个关键时机调用它：
- 页面首次加载时（恢复历史数据）；
- 表单提交后（新增一条数据）。
以下是优化后的核心 JavaScript 代码（替换原 flashcard_script.js）：
// 初始化词汇数组（从 localStorage 加载）
let myVocab = JSON.parse(localStorage.getItem('myVocab')) || [];
// ✅ 新增：统一渲染卡片的函数
function renderVocabCard(vocab) {
const vocabGrid = document.querySelector('.vocab-grid');
const newVocabCard = document.createElement('div');
newVocabCard.classList.add('vocab-card');
newVocabCard.style.cssText = `
padding: 10px;
border: 3px solid black;
color: var(--drkPurple);
background-color: white;
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
`;
const vocabWord = document.createElement('p');
vocabWord.innerText = vocab.word;
const vocabMeaning = document.createElement('p');
vocabMeaning.innerText = vocab.meaning;
const vocabNotes = document.createElement('p');
vocabNotes.innerText = vocab.notes;
newVocabCard.append(vocabWord, vocabMeaning, vocabNotes);
vocabGrid.appendChild(newVocabCard);
}
// ✅ 页面加载时：渲染所有已存卡片
myVocab.forEach(renderVocabCard);
// 表单处理逻辑
const form = document.querySelector('#vocab-form');
const vocabGrid = document.querySelector('.vocab-grid');
function addVocab(event) {
event.preventDefault();
const data = new FormData(event.target);
const formObj = Object.fromEntries(data.entries()); // 更简洁地转换 FormData
const newVocab = {
word: formObj.word,
meaning: formObj.meaning,
notes: formObj.notes
};
myVocab.push(newVocab);
// ✅ 保存到 localStorage
localStorage.setItem('myVocab', JSON.stringify(myVocab));
// ✅ 渲染新卡片（复用函数）
renderVocabCard(newVocab);
event.target.reset();
}
form.addEventListener('submit', addVocab);
✅ 关键改进说明：
- 使用 Object.fromEntries(data.entries()) 替代手动遍历 FormData，更简洁可靠；
- 移除冗余的 Vocab 构造函数——纯对象足够表达数据，降低初学者理解门槛；
- renderVocabCard() 封装全部 DOM 创建逻辑，消除重复代码，符合单一职责原则；
- 页面加载时通过 myVocab.forEach(renderVocabCard) 批量重建所有卡片；
- 提交后直接调用 renderVocabCard(newVocab)，保持行为一致性。
⚠️ 注意事项：
- localStorage 只能存储字符串，因此必须用 JSON.stringify() 和 JSON.parse() 进行序列化/反序列化；
- 初始化 myVocab 时使用 || [] 防止 null 或解析失败导致后续 .forEach() 报错；
- 若未来需支持编辑或删除卡片，建议为每张卡片添加唯一 id 字段，并在 localStorage 中按 id 管理数据。
现在，无论刷新页面、关闭标签页还是重启浏览器，你添加的所有词汇卡片都会完整重现——这是前端数据持久化的最基础、最实用的实践范例。
