请让我知道这是否属于另一个主题。
我有一个涉及用户卡的元素。
目标: 1. 添加在为每个用户卡提供的文本输入中输入评论/标签的功能。 2. 使用 localStorage JavaScript 保存输入的评论/标签。 3. 保存评论/标签以显示在输入评论/标签的用户卡片中。 例如。 3 张用户卡片，仅在卡片 1 和 3 上输入评论/标签，加载标签评论/标签应仅出现在卡片 1 和 3 上，卡片 2 将显示占位符或空白。
问题: 如果我在卡片 1 上输入评论/标签，加载它会按预期显示在卡片 1 上。
当在卡片 2 或 3 上输入评论/标签时，onload 评论/标签将仅出现在卡片 1 上，而不会出现在输入评论/标签的卡片上。
当我执行 forEach 时，我是不是忘记了什么(或者我是否滥用了它们)。 感谢任何帮助/指导，对不起，我是 JavaScript 的新手。
**如果可能，最好使用纯 JavaScript 代码示例。
我的代码链接到 CodePen - https://codepen.io/marcusnapoleon/pen/GRKzpeE
//SAVE
function saveTag(event) {
var tagTerm = event.target.value;
var tagTextInput = document.querySelectorAll("p.tagFilter");
tagTextInput.forEach(function (cardTags) {
localStorage.setItem("tag", tagTerm)
});
}
//RETRIEVE
function show(event) {
tagTextInput = document.querySelectorAll("p.tagFilter");
tagTextInput.forEach(function (getTags) {
var y = localStorage.getItem("tag");
document.getElementById("name").innerHTML = y
});
}
.card{
width: 300px;
border: 1px solid lightgrey;
padding: 5px 20px;
}
.container{
width: 60%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-evenly;
padding: 100px 250px;
font-size: 1.2rem;
}<!DOCTYPE html>
<html>
<head>
</head>
<body onload="show()">
<div class="container">
<div class="card">
<h2>Name : User One</h2>
<h2>Title : Job One</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
<div class="card">
<h2>Name : User Two</h2>
<h2>Title : Job Two</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
<div class="card">
<h2>Name : User Two</h2>
<h2>Title : Job Two</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
</div>
</body>
</html>最佳答案
您正在设置具有相同名称的值，即使它们是不同的值。
您应该使用不同的名称设置值。它可以像这样编辑:
function saveTag(event) {
var tagTerm = event.target.value;
var tagTextInput = document.querySelectorAll("p.tagFilter");
tagTextInput.forEach(function (cardTags, itemIndex) {
localStorage.setItem("tag" + itemIndex, tagTerm);
});
}
这将保存具有个人名称的值，通过 0,1,2 区分索引。
编辑 2019-09-27
我对你的代码做了一些修改，这里是:https://codepen.io/firesped1/pen/ExYJQgy?editors=1010
在解释我做了什么之前，我必须先说明一下:
HTML 不能有重复的 ID。 它违反了 HTML 标准，导致 ID 选择器出错。如果您想一次选择多个元素，请使用类或标签选择器。
问题是您将相同的值保存到不同的 localStorage 键。我更改了逻辑以直接保存到 localStorage。
如果你没有不明白的地方，尽管问我。
关于JavaScript localStorage - 来自多个用户卡的文本输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58108847/