纯HTML表单仅提供结构，无法真正提交保存；必须用JavaScript阻止默认行为并配合localStorage实现本地存储，且需正确处理null判断、DOM动态插入和事件委托。
怎么用 <form></form> 搭出可提交的留言板结构
纯 HTML 能搭出表单外壳，但不能处理提交逻辑——<form></form> 本身只是容器，没 action 或 method 就是摆设。别指望双击 index.html 就能存留言。
常见错误是写成 <form action="save.html"></form>，结果点击提交跳转到空白页：浏览器根本不会执行 HTML 文件里的“保存”动作，它只会加载那个文件。
- 必须显式加
onsubmit="return false;"或用 JSevent.preventDefault()阻止默认跳转 -
<textarea></textarea>要设id或name，不然 JS 拿不到值；<button type="submit"></button>比type="button"更语义化，也兼容键盘回车提交 - 别把昵称、邮箱、留言全塞进一个
<input type="text">，用语义化标签分层：<label for="nickname">昵称</label><input id="nickname" name="nickname">
为什么 localStorage 是本地留言板唯一靠谱的存储方式
因为它是浏览器原生支持、无需后端、API 简单——但只适合练手或单人离线记录。刷新不丢数据的前提是你正确读写了它。
典型翻车点：JSON.parse(localStorage.getItem('messages')) 直接报 Unexpected token 'n'，原因是首次运行时 getItem 返回 null，而 JSON.parse(null) 解析失败。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
const saved = localStorage.getItem('messages'); const messages = saved ? JSON.parse(saved) : []; -
localStorage.setItem()只接受字符串，数组/对象必须先JSON.stringify()；读取后必须JSON.parse()，否则还是字符串 - 隐身窗口禁用
localStorage，测试务必用普通窗口；容量上限约 5–10MB，但单条留言超长（比如粘贴整篇论文）可能触发 QUOTA_EXCEEDED_ERR
动态渲染留言列表时，innerHTML += 为什么是危险操作
它会强制重绘整个容器 DOM 树，导致已绑定的事件监听器全部丢失——比如你给每条留言加了删除按钮，用 innerHTML += 追加新留言后，旧按钮就点不动了。
更糟的是 XSS 风险：如果用户输入 <script>alert(1)</script>，又用 innerHTML 直接插入，脚本立刻执行。
- 正确做法：创建新元素，用
appendChild()或insertAdjacentElement('beforeend', li) - 防 XSS：用
li.textContent = messageContent而非li.innerHTML = messageContent - 每条留言建议包在
<li class="message">里，方便后续加样式、动画或 data-* 属性（如data-timestamp）
删除按钮点不了？十有八九没搞懂事件委托
动态添加的按钮，不能靠 document.querySelectorAll('.delete-btn').forEach(...) 绑定事件——这段代码只在页面加载时跑一次，新增的按钮根本没被监听。
真实场景中，你得让父容器“代管”事件：监听 <ul id="msg-list"></ul> 的 click，再判断目标是不是删除按钮。
- 按钮要带标识，比如
<button class="delete-btn" data-index="2">×</button> - 父容器监听：
msgList.addEventListener('click', e => { if (e.target.matches('.delete-btn')) { const idx = +e.target.dataset.index; messages.splice(idx, 1); localStorage.setItem('messages', JSON.stringify(messages)); renderList(); } }); - 注意
matches()兼容性比classList.contains()更稳，IE11+ 支持
真正卡住人的不是语法，而是 localStorage 的 null 判断、DOM 插入时机、事件绑定范围这三处——它们不出错时一切丝滑，一出错就是“按钮点了没反应”“刷新后留言全没了”“别人留言弹窗黑屏”，查起来特别费时间。
