纯html无法保存留言，需javascript操作localstorage实现本地持久化，但存在xss风险与容量限制；多人共享需后端支持。
纯 HTML 搭不出能存留言的留言板——它只负责画框，不负责记事。想点提交就留下文字，必须加 JavaScript；想刷新后还在，得用 localStorage；想多人用、不丢数据，就得接 PHP 或其他后端。
为什么直接双击 HTML 文件没法保存留言
浏览器打开 index.html 时，所有逻辑都在本地运行，没有服务器参与。<form></form> 默认行为是跳转或加载新页面，比如写成 action="save.html"，点击提交只会打开一个空白页，根本不会“保存”任何东西。
- 常见翻车：没写
onsubmit="return false;"或没调event.preventDefault()，表单一提交就刷新页面，刚输的字全没了 -
<input type="text">和<textarea></textarea>必须带id或name，否则 JS 根本拿不到值 - 用
<button type="submit"></button>而不是<button type="button"></button>，才能兼容键盘回车提交
localStorage 是本地存留言唯一靠谱的方式
它是浏览器内置、不用装、不用配，API 就两行：setItem 存，getItem 取。但新手常在这里报错：Unexpected token 'n'，其实是 getItem 返回 null，你直接传给 JSON.parse() 导致崩溃。
- 安全写法：
const saved = localStorage.getItem('messages'); const messages = saved ? JSON.parse(saved) : []; -
setItem只收字符串，数组/对象必须先JSON.stringify()；读出来必须JSON.parse()，否则还是字符串 - 隐身窗口默认禁用
localStorage，测试务必用普通窗口 - 单条留言别塞几万字，超 5MB 容量会触发
QUOTA_EXCEEDED_ERR
动态渲染留言列表时，千万别用 innerHTML +=
看着方便，实际危险：它会把整个容器内容重绘一遍，已绑定的事件监听器（比如删除按钮）全部失效；更严重的是，如果用户输入了 <script>alert(1)</script>，又用 innerHTML 直接插入，脚本立刻执行——XSS 漏洞就这么来了。
- 正确做法：用
document.createElement('li')创建新节点，再用appendChild()或insertAdjacentElement('beforeend', li) - 防 XSS：显示用户内容时，一律用
li.textContent = messageContent，别用li.innerHTML = ... - 每条留言建议包在
<li class="message">里，方便后续加样式、时间戳（data-timestamp）或删除逻辑
真正卡住小白的，往往不是怎么写结构，而是不知道哪一步该停——比如本地存完就以为完成了，结果换台电脑、清个缓存，留言全没；或者写了 JS 却没连上 PHP，以为“表单能提交”就是功能做完。动手前先想清楚：这个留言板到底要谁用？在哪用？要不要别人也看见？答案不同，技术路径差得远。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
