纯前端留言板无法持久保存数据，刷新后留言消失；localStorage是唯一跨刷新保留数据的原生方案，需JSON序列化、注意同源与敏感信息处理，表单须preventDefault()，动态渲染应避免innerHTML+=，删除需事件委托，数据结构必须用对象数组存储。
纯前端 HTML 留言板无法持久保存数据，所有留言在刷新页面后都会消失——这是最核心的限制，别被“可运行”演示页误导。
为什么 localStorage 是最现实的本地存储选择
没有后端时，localStorage 是唯一能跨页面刷新保留数据的浏览器原生方案。它比 sessionStorage 更适合留言场景，因为后者在关闭标签页后即清空；而 cookies 容量小、自动随请求发送，完全不适用。
-
localStorage单域名上限通常 5–10MB，存几百条纯文本留言绰绰有余 - 必须手动序列化：用
JSON.stringify()存，JSON.parse()取，否则只能存字符串 - 注意同源限制：http://a.com 和 https://a.com 视为不同源，数据不互通
- 敏感字段如邮箱不要明文存——哪怕只是本地演示，也该养成习惯
表单提交时必须 preventDefault() 否则页面会跳转或刷新
HTML 表单默认行为是提交后向服务器发请求并刷新页面。前端留言板没后端接收，这个动作只会导致刚输的留言瞬间清空。
- 绑定
submit事件后第一件事就是调用event.preventDefault() - 别只监听
click，按钮类型是submit时回车也会触发，必须捕获表单级事件 - 校验失败时也要
preventDefault()，否则错误提示一闪而过
动态渲染留言列表时，避免 innerHTML += 的陷阱
用 element.innerHTML += newHtml 看似方便，但每次执行都会销毁并重建整个 DOM 子树，已绑定的事件（比如“删除”按钮）全部失效，且性能差。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
document.createElement()+appendChild()或insertAdjacentElement('afterbegin', el)插入新项 - 想让新留言显示在顶部？用
insertAdjacentElement('afterbegin', el)，不是appendChild() - 删除操作必须委托到父容器（如
#messages），监听click并判断event.target.matches('.delete-btn') - 每条留言需带唯一 ID（可用
Date.now() + Math.random()简单生成），否则删错条目
真正容易被忽略的是数据结构设计：别把昵称、内容、时间拼成一个字符串存进 localStorage。必须用数组存对象，例如 [{id: '123', nickname: '张三', message: '你好', time: '2026-08-05T13:09:00' }]——否则后期加邮箱字段、排序、过滤、分页全得重写。
