纯HTML+localStorage可实现无服务器留言板，核心是JSON序列化存取、动态DOM渲染防重绘、事件委托处理动态按钮，并注意null判断、XSS防护及容量限制。
留言板用纯 HTML + localStorage 就能跑起来
不需要服务器、不装框架，index.html 本地双击就能写留言。核心是用 localStorage 持久存数据，配合表单提交和 DOM 动态渲染——但得注意它只能存字符串，且跨域或隐身窗口会失效。
- 表单
submit事件必须preventDefault()，否则页面刷新丢数据 -
localStorage.setItem()只接受字符串，数组得先JSON.stringify() - 读取时要用
JSON.parse()，但首次运行可能拿到null，得做空值判断 - 别把敏感信息（如邮箱、手机号）存在
localStorage，它对同源页面完全可见
表单提交后怎么把留言追加到页面上？
不是清空输入框再 innerHTML +=，那样会重绘整个列表、丢失已有事件绑定。正确做法是创建新 <li> 元素，用 appendChild() 或 insertAdjacentElement() 插入到留言容器末尾。
- 每条留言建议包在
<li class="message">里，方便后续加样式或删除按钮 - 时间戳用
new Date().toLocaleString()，比Date.now()更直观 - 用户输入内容要过一遍
textContent赋值（不是innerHTML），防 XSS - 如果想置顶最新留言，用
prepend()；想按时间倒序，就每次插到firstChild前面
刷新页面后留言消失？检查 localStorage 读取逻辑
常见错误是只在页面加载时读一次，但没处理 localStorage.getItem('messages') 返回 null 的情况，导致 JSON.parse(null) 报错 Unexpected token 'n'。
- 稳妥写法：
const saved = localStorage.getItem('messages'); const messages = saved ? JSON.parse(saved) : []; - 初始化列表时，遍历
messages数组，逐条调用渲染函数，而不是一次性拼接字符串 - 用浏览器开发者工具的
Application → Storage → Local Storage手动删掉messages键，测试空数据场景 - 隐身窗口默认禁用
localStorage，测试得用普通窗口
加个删除按钮但点不了？事件委托是关键
动态添加的按钮没有绑定事件，直接 querySelectorAll('.delete-btn').forEach(...) 在渲染后执行是无效的——因为下次新增按钮时，这段代码不会重跑。得用事件委托，监听父容器的 click，再判断目标是否匹配删除按钮。
立即学习“前端免费学习笔记（深入）”；
- 给留言容器（比如
<ul id="msg-list">）绑定事件：msgList.addEventListener('click', e => { if (e.target.classList.contains('delete-btn')) { ... } }) - 按钮本身要带唯一标识，比如
data-index="2"，方便定位对应留言项 - 删除后记得同步更新
localStorage：先splice()数组，再setItem() - 别用
innerHTML = ''清空再重绘，会打断事件委托链
真正麻烦的不是写几行 JS，而是 localStorage 的边界：它没过期机制、没查询能力、容量上限约 5–10MB 但实际写入大文本容易触发 QUOTA_EXCEEDED_ERR。如果留言要搜、要分页、要多设备同步，这时候就得承认——index.html 该让位了。
