我试图创建一个基本的脚本，从HTML表单中获取信息并将其显示在页面上。这个项目只是为了练习我目前正在自学的JavaScript功能。
现在提交表单会在页面上创建一张卡片，显示提交的信息，每次提交表单都会创建一张新卡片。然而，我现在面临的挑战是，当页面刷新时，所有卡片都会消失。
我试图弄清楚如何使用localStorage，并在代码中添加了一些基本功能;然而，我发现当页面刷新时，卡片仍然会消失。我的问题是：
1.如何检查表单提交的数据是否实际保存在某个位置？
1.如何编辑代码，使其在页面刷新后仍能继续显示页面上现有的卡片？
下面是我在CodePen上的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcard Project</title>
<link rel="stylesheet" href="./flashcard_styles.css">
</head>
<body>
<div class="form-wrapper">
<h1 class="form-title">Add a word</h1>
<form id="vocab-form" method="POST">
<div class="input-group">
<label for="word">Word</label>
<input id="word" name="word" type="text" placeholder="詞彙">
</div>
<div class="input-group">
<label for="meaning">Meaning</label>
<input id="meaning" name="meaning" type="text" placeholder="vocabulary">
</div>
<div class="input-group">
<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="6" cols="30"></textarea>
</div>
<button id="submit" type="submit" value="submit">Add</button>
</form>
</div>
<div class="vocab-grid">
</div>
<script src="./flashcard_script.js"></script>
</body>
</html>个字符
我是一个完全的JavaScript初学者，这是我第一次尝试使用API，所以最简单的方法来解决这个问题将是最好的我的学习！提前感谢！
1条答案
按热度按时间kd3sttzy1#
你的数据正在被保存到localStorage -我用你的codepen上的开发工具进行了验证。问题是你没有代码来在页面加载时生成卡片。
我的建议是创建一个接受vocab对象的函数，并将相应的card添加到dom中（类似于您在提交侦听器中的代码）。
在你调用loadData的地方，你将循环遍历vocab数组，并为数组中的每一项调用该函数。你也可以在提交处理程序中使用这个新函数来减少代码重复。这有意义吗？