如何用JavaScript实现页面刷新后保留创建的评论元素

问题 #

我正在给弟弟开发一个支持用户添加评论的交互式网页，现在遇到个技术问题：用forEach生成用户评论后，页面一刷新评论就没了。我知道要用localStorage，但还没找到可行的解决办法，求帮忙！

原代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comments</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/nmComments.css">

</head>

<body>

  <header class="header">
    <a class="logo" href="#">
      <p>Comments page</p>
    </a>
    <button class="button--menu">
      <ion-icon class="menu--icon" name="menu"></ion-icon>
    </button>
  </header>

  <main>
    <div class="main">
      <form class="comment--form" action="#" id="form">
        <h1 class="interact">Interact with us!<br>Leave your comment here</h1>

        <div>
          <label for="comment--text">Your comment:</label><br>
          <textarea class="comment--box" type="text" required id="textarea" placeholder="Add your comment"
            maxlength="150"></textarea>
        </div>
        <button class="form--button" id="submit">Paste it</button>
      </form>
    </div>

    <h2 class="comments--h2">Comments</h2>
    <div id="comment--area" class="comment--area">
      <!-- <div class="client--box">
        <div id="name-box"></div>
      <div id="comment-box">
        </div>
        <button id="clear" class="hidden">
          &#128591;</button>
      </div> -->
    </div>
  </main>

  <footer>
    <div class="footer"></div>
  </footer>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script language="Javascript">
const field = document.getElementById('textarea');

const submit = document.getElementById('submit');

const createComments = document.getElementById('comment--area');

const comments_arr = [];


submit.onclick = function(event){
    event.preventDefault();
    const content = field.value;
    if(content.length > 0){ // if there is content add the comment to the array
    
      comments_arr.push(content);

      // re-generate the comment html list

      display_comments();
      
      // reset the textArea and arrey contents
      comments_arr.length = 0;
      field.value = '';
      
    }
}

const display_comments = ()=> {
  let box = document.createElement('textarea');
  box.classList.add('comment--box');
  createComments.append(box);
  let list = '';
   comments_arr.forEach(comment =>  {
    list +=  comment;
  })

  box.append(list);
  box.innerHTML = list;
}
</script>
</body>

</html>

解决方案 #

核心思路是用localStorage持久化评论数据，页面加载时读取本地存储的评论，提交新评论时同步保存到本地存储，具体修改如下：

关键修改点 #

1. 初始化评论数组：从localStorage读取已保存的评论，无数据则初始化空数组
2. 持久化评论数据：每次添加新评论后，将数组转为字符串存入localStorage（localStorage仅支持字符串存储）
3. 页面加载自动渲染：页面初始化时调用渲染函数，展示已保存的评论
4. 优化渲染逻辑：渲染前清空评论区，避免重复添加内容

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comments</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/nmComments.css">

</head>

<body>

  <header class="header">
    <a class="logo" href="#">
      <p>Comments page</p>
    </a>
    <button class="button--menu">
      <ion-icon class="menu--icon" name="menu"></ion-icon>
    </button>
  </header>

  <main>
    <div class="main">
      <form class="comment--form" action="#" id="form">
        <h1 class="interact">Interact with us!<br>Leave your comment here</h1>

        <div>
          <label for="comment--text">Your comment:</label><br>
          <textarea class="comment--box" type="text" required id="textarea" placeholder="Add your comment"
            maxlength="150"></textarea>
        </div>
        <button class="form--button" id="submit">Paste it</button>
      </form>
    </div>

    <h2 class="comments--h2">Comments</h2>
    <div id="comment--area" class="comment--area">
    </div>
  </main>

  <footer>
    <div class="footer"></div>
  </footer>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script language="Javascript">
const field = document.getElementById('textarea');
const submit = document.getElementById('submit');
const createComments = document.getElementById('comment--area');

// 从localStorage读取评论，无数据则初始化空数组
let comments_arr = JSON.parse(localStorage.getItem('comments')) || [];

// 页面加载时自动渲染已保存的评论
display_comments();

submit.onclick = function(event){
    event.preventDefault();
    const content = field.value.trim();
    if(content.length > 0){ 
      comments_arr.push(content);
      // 将评论数组转为字符串存入localStorage
      localStorage.setItem('comments', JSON.stringify(comments_arr));
      display_comments();
      field.value = '';
    }
}

function display_comments() {
  // 清空评论区，避免重复渲染
  createComments.innerHTML = '';
  
  comments_arr.forEach(comment => {
    let box = document.createElement('div');
    box.classList.add('comment--box');
    // 用div展示评论更符合阅读场景，若需可编辑可改回textarea
    box.textContent = comment;
    createComments.appendChild(box);
  });
}
</script>
</body>

</html>

额外说明 #

• 把原代码中用于展示评论的textarea替换为div，因为textarea是输入控件，用于展示内容不符合常规交互逻辑，若需要评论可编辑可改回
• 每次操作评论后用JSON.stringify转换数组格式，读取时用JSON.parse还原为数组，适配localStorage的存储规则
• 页面加载时自动执行渲染函数，确保刷新页面后评论不会丢失

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