纯前端HTML无法真正保存留言，刷新即丢数据；必须搭配后端或第三方服务才能持久化，localStorage仅支持单设备伪持久化且无法跨用户共享。
纯前端 HTML 无法真正保存留言——所有“本地留言板”只是模拟，刷新即丢数据。 如果你期望访客提交后内容能持久显示，必须搭配后端（如 PHP/Node.js）或第三方服务（如 Formspree、Staticman），否则只能用于演示或本地测试。
为什么 form 提交后页面空白或报错 405 Method Not Allowed
HTML 自身没有处理表单提交的能力。浏览器点击提交时，默认用 POST 方法发向 action 指定的 URL；若该 URL 是本地 HTML 文件（如 action="message.html"）或留空，服务器通常拒绝该请求。
- 不要写
action="index.html"或action=""—— 这不是解决办法，是错误源头 - 临时调试可改用
action="https://httpbin.org/post"查看提交结构（仅查看，不存数据） - 真要落地，得把
form指向一个真实接收接口，比如action="/api/submit"（需自己部署后端）
用 localStorage 实现“伪持久化”留言列表
适合本地演示、教学或离线原型：留言存在浏览器里，关页不丢，但换设备/清缓存就消失，且无法跨用户共享。
- 每次提交前，用
JSON.parse(localStorage.getItem('messages') || '[]')读取已有数据 - 追加新对象（含
name、content、time）后，再用localStorage.setItem('messages', JSON.stringify(newList))写回 - 渲染时遍历数组，拼接
<div class="msg">...</div>插入到<div id="msg-list"></div> - 注意：IE8+ 支持
localStorage，但 Safari 无痕模式会直接抛SecurityError，需try/catch包裹
避免常见 DOM 操作翻车点
新手常在这里卡住：表单没反应、留言重复插入、时间显示为 NaN。
立即学习“前端免费学习笔记（深入）”；
- 绑定事件别用
onclick="submitMsg()"行内写法——优先用document.querySelector('form').addEventListener('submit', ...)并调用event.preventDefault() - 获取输入值别写
input.value后直接拼字符串——先.trim()去首尾空格，空值则return阻止提交 - 生成时间别用
new Date().toLocaleString()（格式不统一）——推荐new Date().toISOString().slice(0,16).replace('T',' ')得到2024-05-22 14:30 - 插入新留言别用
innerHTML += ...——会重绘全部旧内容，改用element.insertAdjacentHTML('afterbegin', htmlStr)更安全
真正的留言系统从来不在 HTML 里完成。localStorage 方案能跑通流程，但只要涉及多人访问、防刷、搜索、管理后台，就必须走出纯前端——那不是“简易”的范畴了。
