留言板需后端才能持久保存数据，纯HTML无法存储；本地调试可用localStorage模拟，上线必须配真实后端或第三方服务，表单须语义化、防默认提交并校验。
留言板需要后端才能真正保存数据
纯 HTML 无法持久保存用户提交的留言——它只是静态结构，没有存储能力。如果你用 <form> 提交到一个地址（比如 action="/submit"），浏览器会发起请求，但服务器端必须有对应逻辑接收、校验、存入数据库或文件，否则表单提交后页面刷新、数据就丢了。
常见错误现象：405 Method Not Allowed（没配 POST 路由）、404 Not Found（后端没写处理接口）、提交后页面空白或跳转失败（前端没加 event.preventDefault() 且后端没返回响应）。
可选轻量方案：
- 本地调试阶段用
localStorage模拟存储（仅限当前浏览器，关掉就清空） - 上线部署时必须配真实后端：Node.js + Express、Python Flask、PHP 或 Serverless 函数（如 Vercel/Cloudflare Functions）
- 不想写后端？可用第三方服务，比如
Formspree（免费版限每日 50 次）、Netlify Forms（需托管在 Netlify）
HTML 表单结构要包含必要字段和语义化标签
一个可用的留言表单不能只有 <input> 和 <textarea>，否则无障碍访问差、移动端体验弱、JS 获取困难。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 每个输入项必须有
<label for="xxx">关联id，比如<label for="message">留言内容</label><textarea id="message" name="message"></textarea> -
<form>必须带method="POST"（即使前端用 JS 提交，也建议设好）和有效的action（开发时可先设为#） - 给
<textarea>加required和maxlength="500"控制输入长度，避免后端被超长文本冲击 - 禁用默认提交行为：给
<form>绑定submit事件并调用event.preventDefault()
用 JavaScript 实现本地 localStorage 存储和渲染
适合学习、演示或纯静态站点临时使用。注意：不同域名、无痕窗口、清除缓存都会丢失数据。
核心操作：
- 提交时用
JSON.stringify()把留言对象转成字符串，存进localStorage.setItem('messages', str) - 加载页面时用
localStorage.getItem('messages')读取，JSON.parse()还原为数组 - 渲染列表用
messages.forEach(msg => { ... })拼接<div class="msg">...，再插入到<div id="msg-list"></div> - 别忘了清空
<textarea>并聚焦回输入框：textarea.value = ''; textarea.focus();
示例片段（不依赖框架）：
document.getElementById('msg-form').addEventListener('submit', e => {
e.preventDefault();
const msg = document.getElementById('message').value.trim();
if (!msg) return;
const messages = JSON.parse(localStorage.getItem('messages') || '[]');
messages.push({ text: msg, time: new Date().toISOString() });
localStorage.setItem('messages', JSON.stringify(messages));
renderMessages();
});
部署前必须检查跨域和 CSP 限制
如果后端 API 在另一个域名（比如 https://api.example.com），而你的 HTML 托管在 https://site.netlify.app，浏览器会拦截请求，报错 CORS policy: No 'Access-Control-Allow-Origin' header。
解决方案取决于你控制哪一端：
- 你控制后端：在响应头加
Access-Control-Allow-Origin: *（开发可，生产建议指定域名） - 你只控制前端：改用同源 API（比如 Netlify Functions 的
/.netlify/functions/submit）或代理（Vite 的server.proxy、Webpack DevServer 的proxy） - 若用 CDN 或安全策略严格（如 GitHub Pages 默认启用了 CSP），检查是否屏蔽了
fetch或script请求 —— 可能需要调整<meta http-equiv="Content-Security-Policy">
容易被忽略的是：本地双击打开 HTML 文件（file:// 协议）时，localStorage 可用，但 fetch 会被直接拒绝，连 CORS 都不报 —— 必须起本地服务（npx serve、python3 -m http.server）才能测试真实网络请求。
