本地无服务器环境下，如何实现表单提交数据到posts数组并刷新保留？

直接用你当前的方案无法实现页面刷新后保留新增文章，原因很简单：你定义的posts数组是存储在JavaScript内存中的，当页面刷新时，浏览器会重新加载所有代码，内存里的数组会被重置为初始的三篇文章，新添加的内容自然就丢失了。

不过别担心，我们可以利用浏览器自带的localStorage API解决这个问题——它能把数据持久化存储在用户的本地设备上，即使页面刷新甚至浏览器重启，数据也不会丢失。下面是针对你的代码的具体修改方案：

第一步：修改JavaScript代码 #

我们需要做这几个关键调整：

• 初始化posts时优先从localStorage读取，没有数据再用默认数组
• 添加新文章后，把更新后的posts数组存入localStorage
• 修复原代码里的拼写错误（newtitle → newTitle）
• 阻止表单的默认提交行为，避免不必要的页面刷新

修改后的JS代码：

// 初始化posts：先从localStorage读取，没有则用默认数组
let posts = JSON.parse(localStorage.getItem('blogPosts')) || [
  { 
    author: "Gabriel Alexandrescu", 
    title: "Prajiturile cu ciocolata", 
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi felis magna, sodales commodo varius a, pulvinar ac enim. Etiam vitae tortor eleifend, mollis magna id, venenatis purus. Nam vestibulum feugiat condimentum. Nulla volutpat lacus et urna vehicula, eu accumsan nibh iaculis. Sed quis efficitur leo, in malesuada sem. Etiam interdum velit justo, eget congue eros molestie sit amet. Nulla et tincidunt nibh.", 
    date: "04/02/2018" 
  }, 
  { 
    author: "Laura Oprisan", 
    title: "Masinile hybrid", 
    date: "12/03/2018", 
    content: "Nulla facilisi. Morbi urna mi, commodo a lacus at, rhoncus malesuada mi. Vivamus accumsan tempus magna vitae pellentesque. Morbi rutrum risus ligula, ac posuere est finibus eu. Duis semper porta magna, eget pulvinar neque lacinia vitae. Vestibulum luctus sollicitudin nisl, in hendrerit lacus vehicula eu. Curabitur venenatis ipsum ut dignissim consectetur. Ut pellentesque vitae nulla eu finibus. Nulla facilisi. Suspendisse sem nibh, tristique nec venenatis sed, fringilla at libero. Nullam et nisl eget urna sodales semper sit amet eu ex. Quisque ut risus eget metus porta euismod. Nam imperdiet ipsum non tortor maximus, non varius lacus commodo. Nam rutrum tellus metus, et luctus ex facilisis efficitur. Suspendisse ut augue porta ex suscipit varius sed et metus." 
  }, 
  { 
    author: "Alin Popescu", 
    title: "Cafeaua in ziua de azi", 
    date: "10/05/2018", 
    content: "Integer mi ante, luctus quis sagittis nec, rhoncus elementum magna. Morbi ultricies consequat urna. Pellentesque at lorem sed neque sodales vehicula. Nam massa lectus, pharetra et feugiat non, pellentesque in elit. Donec consectetur iaculis neque, ac pharetra turpis. Sed molestie mauris et arcu ultrices, vitae vehicula erat rutrum. Quisque justo massa, rhoncus rhoncus imperdiet vitae, blandit vitae magna." 
  } 
];

function renderPosts() {
  let postsList = document.getElementById("postsList");
  // 先清空现有内容，避免重复渲染旧文章
  postsList.innerHTML = '';
  posts.forEach((element) => {
    postsList.innerHTML += `
      <li>
        <div class="card">
          <h3 class="noMargin">${element.title}</h3>
          <h5 class="noMargin">By ${element.author} | ${element.date}</h5>
          <p>${element.content}</p>
        </div>
      </li>`;
  });
}

function start() {
  renderPosts();
}

function submit(e) {
  // 阻止表单默认提交行为，避免页面跳转
  e.preventDefault();
  
  var nowDate = new Date();
  var formattedDate = `${nowDate.getDate()}/${nowDate.getMonth() + 1}/${nowDate.getFullYear()}`;
  var newAuthor = document.getElementById("form").elements[0].value;
  var newTitle = document.getElementById("form").elements[1].value; // 修复拼写错误
  var newContent = document.getElementById("form").elements[2].value;
  
  var newPost = { 
    author: newAuthor, 
    title: newTitle, 
    content: newContent, 
    date: formattedDate 
  };
  
  posts.push(newPost);
  // 把更新后的posts存入localStorage，实现持久化
  localStorage.setItem('blogPosts', JSON.stringify(posts));
  // 重新渲染文章，不用刷新页面就能看到新内容
  renderPosts();
  // 清空表单，方便下次输入
  document.getElementById("form").reset();
}

window.addEventListener("load", start);
// 给表单绑定submit事件，替代按钮的onClick绑定
document.getElementById("form").addEventListener('submit', submit);

第二步：调整HTML代码 #

只需要修改提交按钮的绑定方式，移除onClick属性（我们已经通过JS绑定了表单的submit事件），同时确保文章展示容器存在：

<h1>Add post</h1>
<form class="form" id="form">
  <label>Author</label> <br>
  <input type="text" name="author" id="author" class="otherFields"> <br>
  <label>Title</label> <br>
  <input type="text" name="title" class="otherFields"> <br>
  <label>Content</label> <br>
  <input type="text" name="content" class="contentField"> <br>
  <input type="submit" value="submit" class="submit">
</form>

<!-- 文章展示的容器，必须存在才能渲染文章 -->
<ul id="postsList"></ul>

关键修改说明 #

1. localStorage读写逻辑：
   • JSON.parse(localStorage.getItem('blogPosts'))：读取本地存储的文章数据，因为localStorage只能存储字符串，所以要用JSON.parse转成数组格式
   • localStorage.setItem('blogPosts', JSON.stringify(posts))：把数组转成字符串存入本地存储，完成持久化
2. 表单事件优化：用表单的submit事件代替按钮的onClick，同时调用e.preventDefault()阻止默认的页面跳转行为，添加文章后不用刷新页面就能看到新内容
3. 渲染逻辑优化：每次渲染前清空postsList的内容，避免重复渲染旧文章
4. 修复拼写错误：原代码里的newtitle写成了newTitle，会导致新文章标题为空，现已修正

这样修改后，你添加的新文章会被存在本地，页面刷新甚至关闭浏览器后再打开，文章依然会保留下来。

内容的提问来源于stack exchange，提问作者Teodor Tița