纯html模板无法实现真实留言板，只能用localstorage本地演示或对接后端api；form action不能指向html文件，必须指向可处理post的接口；需注意xss防护、请求头配置及服务端校验。
纯 HTML 模板里加不了真实留言板，所谓“快速整合”只有两种路径：用 localStorage 做本地演示，或对接已有后端 API。没有中间态。
为什么 form action="xxx.html" 不能存留言
浏览器提交表单时，action 指向一个 HTML 文件，只是让服务器返回那个文件内容——它不会执行任何逻辑，更不会写数据库。常见错误现象是点提交后跳转到空白页或 404，本质是服务器没配路由处理该请求。
-
action必须指向能接收 POST 的接口，比如/api/message，而不是静态文件路径 - 如果后端未启动或路由未注册，会直接报
405 Method Not Allowed或404 Not Found - 前端写了
name="content"但后端收不到，大概率是漏了name属性，id和class不参与表单提交
用 localStorage 实现“能刷新不丢”的本地留言板
适合本地演示、教学、离线原型，但数据只存在当前浏览器、同源页面可见，隐身窗口默认禁用，且容量上限约 5–10MB。
- 提交时必须调用
event.preventDefault()，否则页面刷新导致未保存 - 存数组前要
JSON.stringify()，读取时先判空：const saved = localStorage.getItem('messages'); const messages = saved ? JSON.parse(saved) : []; - 渲染别用
innerHTML +=，会重绘全部 DOM；改用document.createElement()+appendChild()插入新条目 - 用户输入内容一律用
textContent赋值，不用innerHTML，否则<script>alert(1)</script>会被执行
对接后端 API 时 fetch 配置最容易错的三处
前端发得出去，后端收不到，90% 出在请求头和 body 格式不匹配。
- 发 JSON：必须设
headers: { 'Content-Type': 'application/json' }，且body: JSON.stringify({ content, author })；Express 后端要配app.use(express.json()) - 发表单编码（兼容 PHP）：去掉
Content-Type头，body: new URLSearchParams({ content, author })；Express 要配app.use(express.urlencoded({ extended: true })) - 漏掉
method: 'POST'——fetch默认是 GET，不显式声明就白发了
XSS 防护不是“可选项”，是上线前必过门槛
哪怕只给自己人用，只要网页能被访问，脚本就能被构造请求触发。最基础的防护动作必须做。
- 前端临时缓解：所有留言内容用
textContent渲染；若需支持简单格式，用DOMPurify.sanitize(html)过滤 - 后端存储前必须转义：PHP 用
htmlspecialchars($input, ENT_QUOTES, 'UTF-8')；Node.js 推荐he.escape()或模板引擎自动转义 - 别信前端
required或maxlength—— curl 一行命令就能绕过，校验必须落在服务端
真正卡住人的往往不是怎么写，而是没意识到 localStorage 和真实后端之间隔着一整套 HTTP 协议、状态管理、安全策略和部署配置。先明确你要的是“能跑起来看看”，还是“能上线被人用”，再选路。事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
