如何结合localStorage与querySelectorAll实现多输入框评论本地存储

1. 评论覆盖问题：当前存储逻辑使用固定key comment+索引 直接存储单条字符串，每次提交都会覆盖key对应的旧值，没有对同个表单下的多条评论做数组聚合存储。
2. 评论不渲染问题：现有逻辑仅在用户点击提交时，渲染本次提交的单条评论，没有编写页面加载阶段从localStorage读取历史评论、插入DOM的逻辑；仅在控制台打印读取结果，没有基于读取到的内容执行DOM创建、插入操作。

首先调整HTML结构，为每个独立帖子/评论区外层增加唯一标识，避免靠元素索引匹配时出现评论串位：

<!-- 每个独立评论区所属的外层容器加唯一data-post-id，动态渲染页面时替换为对应帖子的真实ID即可 -->
<div class="post-item" data-post-id="post_1">
  <div class="d-flex">
     <input class="form-control ms-2 border-0" type="text" name="commenttext" placeholder="Kommentieren ..." size="50">
      <input class="btn btn-link m-2 text-decoration-none" type="submit" name="comment" value="post">
  </div>

  <div class="ms-2">
       <span class="text-decoration-none text-black-50 custom_font">All comments:</span>
       <div class="fw-lighter comment_form"></div>
  </div>
</div>

替换原有JS逻辑为以下代码：

// 读取指定评论区的历史评论
const getComments = (postId) => {
  const stored = localStorage.getItem(`comments_${postId}`);
  return stored ? JSON.parse(stored) : [];
};

// 保存指定评论区的评论列表
const saveComments = (postId, list) => {
  localStorage.setItem(`comments_${postId}`, JSON.stringify(list));
};

// 渲染单条评论到指定容器
const appendComment = (container, text) => {
  const commentEl = document.createElement("div");
  commentEl.textContent = `User says: ${text}`;
  container.appendChild(commentEl);
};

// 页面加载完成后初始化所有评论区
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.post-item').forEach(postNode => {
    const postId = postNode.dataset.postId;
    const commentContainer = postNode.querySelector('.comment_form');
    const inputEl = postNode.querySelector('input[type="text"]');
    const submitBtn = postNode.querySelector('input[type="submit"]');

    // 初始化时渲染所有已存储的历史评论
    getComments(postId).forEach(content => appendComment(commentContainer, content));

    // 绑定提交事件
    submitBtn.addEventListener('click', (e) => {
      e.preventDefault();
      const content = inputEl.value.trim();
      if (!content) return;

      // 追加新评论到列表、持久化存储、渲染到页面
      const commentList = getComments(postId);
      commentList.push(content);
      saveComments(postId, commentList);
      appendComment(commentContainer, content);
      inputEl.value = '';
    });
  });
});

• 废弃全页面遍历输入框、靠索引匹配评论区的逻辑，每个评论区独立绑定事件，基于唯一postId区分存储key，避免评论串到其他帖子下。
• 同个评论区的多条评论以数组形式聚合存储，新评论追加到数组末尾，不会覆盖历史内容；通过JSON.stringify/JSON.parse做格式转换，适配localStorage仅支持字符串存储的特性。
• 拆分独立的存储、读取、渲染方法，页面初始化时自动拉取所有历史评论渲染到对应位置，解决页面刷新后评论不显示的问题。
• 提交时增加默认行为阻止，避免点击submit按钮触发页面刷新。

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