如何实现页面重载后评论列表的持久化保存？

你的评论目前只存在浏览器内存的数组里，页面一刷新就会丢失。用浏览器自带的localStorage就能实现本地持久化存储，不用后端，简单好懂，完全符合作业需求。

下面是修改后的完整代码，关键改动我标了注释：

<!DOCTYPE html>
<html>
<head>
  <title>Forum</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="pixel">
      <br>
      <br>
      <div class="blackBox">
        <p class="white">| <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/index.html">Home</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/textboxPhase.html">Textbox Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/breakoutPhase.html">Breakout Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/goatPhase.html">Goat Cage Phase</a> | <a class="white" href="file:///home/chronos/u-885ea83f13a0b735b4185df5cf6edb6dafb04e43/MyFiles/HTML%20Final/forum.html">Forum</a> |</p>
      </div><br>
      <br>
      <h1>Welcome to The "There is no Game" Forum</h1>
      <div class="container">
        <h2>Leave us a comment</h2>
        <form>
          <textarea id="" placeholder="Add Your Comment" value=" "></textarea>
          <div class="btn">
            <input id="submit" type="submit" value="Comment"> <button id="clear">Clear</button>
          </div>
        </form>
        <div class="comments">
          <h2>Comments</h2>
          <div id="comment-box">
            <ul>
              <li>WELCOME</li>
            </ul>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        const field = document.querySelector('textarea');
        const backUp = field.getAttribute('placeholder')
        const btn = document.querySelector('.btn');
        const clear = document.getElementById('clear')
        const submit = document.querySelector('#submit')
        const comments = document.getElementById('comment-box');

        // 关键改动1：从localStorage读取已保存的评论，没有的话初始化带WELCOME的数组
        let comments_arr = JSON.parse(localStorage.getItem('forumComments')) || ['WELCOME'];

        // 生成评论列表的函数不变
        const display_comments = () => {
          let list = '<ul>';
          comments_arr.forEach(comment => {
            list += `<li>${comment}</li>`;
          })
          list += '</ul>';
          comments.innerHTML = list;
        }

        clear.onclick = function(event){
          event.preventDefault();
          comments_arr.length = 0;
          // 关键改动2：清空后把空数组保存到localStorage
          localStorage.setItem('forumComments', JSON.stringify(comments_arr));
          display_comments();
        }

        submit.onclick = function(event){
          event.preventDefault();
          const content = field.value;
          if(content.length > 0){
            comments_arr.push(content);
            // 关键改动3：添加新评论后保存到localStorage
            localStorage.setItem('forumComments', JSON.stringify(comments_arr));
            display_comments();
            field.value = '';
          }
        }

        // 关键改动4：页面加载时自动显示已保存的评论
        display_comments();
      </script><br>
      <br>
      <br>
      <div class="as-console-wrapper">
        <div class="as-console"></div>
      </div>
    </div>
  </div>
</body>
</html>

改动说明 #

• localStorage是浏览器自带的本地存储工具，能把数据存在用户浏览器里，刷新页面也不会丢失
• 用JSON.stringify把数组转成字符串存进去，用JSON.parse再转成数组读出来（因为localStorage只能存字符串）
• 每次添加或清空评论后，都要把最新的数组存回localStorage
• 页面加载时调用display_comments()，自动显示之前保存的评论

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