【问题标题】：JavaScript localStorage - Text input from Multiple User CardsJavaScript localStorage - 来自多个用户卡的文本输入
【发布时间】：2019-09-26 02:38:33
【问题描述】：

如果这属于另一个线程，请告诉我。

我有一个涉及用户卡的项目。

目标： 1. 添加在每个用户卡提供的文本输入中输入 cmets/tag 的功能。 2. 使用 localStorage JavaScript 保存输入的 cmets/tag。 3. 保存的 cmets/tag 将显示在输入 cmets/tag 的用户卡中。例如。 3 个用户卡，仅在卡 1 和 3 上输入 cmets/tag，加载标签 cmets/tag 应仅出现在卡 1 和 3 上，卡 2 将显示占位符或空白。

问题：如果我在卡片 1 上输入评论/标签，onload 它会按预期显示在卡片 1 上。

当在卡片 2 或 3 上输入 cmets/tags 时，onload cmets/tag 将仅出现在卡片 1 上，在输入 cmets/tag 的卡片上不会出现任何内容。

当我执行 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>

【问题讨论】：

标签： javascript html css foreach local-storage

【解决方案1】：

您正在设置具有相同名称的值，即使它们是不同的值。

您应该使用不同的名称设置值。可以这样编辑：

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。

如果你没有不明白的部分，请随时问我。

【讨论】：

您好@YJM，感谢您回复我的求助请求，不胜感激。
您好@YJM，我尝试了您在我的codepen (codepen.io/marcusnapoleon/pen/GRKzpeE?editors=1111) 上提供的代码，但是我缺乏使其在我的项目中正常工作的理解。使用 localStorage.getItem 时，您的代码不会显示任何数据。检查 console.log 它显示 3 个项目已保存，但每个标签（tag0、tag1、tag2）都包含从用户卡 3 文本输入中输入的评论/标签..
你好@YJM，我为我的 HTML 错误道歉，我只是复制和粘贴以模仿多个用户卡，我试图设置 api 请求但它不起作用.. 现在我有数组设置类似来自 api 请求的数据结果..
codepen.io/marcusnapoleon/pen/GRKzpeE 我将查看您的新代码，并尝试了解如何使其在我的项目中运行。
你能告诉我我需要学习什么来完成相同的任务吗（添加从每个用户卡/面板的本地存储中检索 cmets） - 我正在从 JavaScript 渲染 html .