纯html留言板无法保存留言，必须用javascript配合localstorage实现本地持久化；需阻止表单默认提交、规范表单控件属性、处理编码与存储上限、安全渲染内容并采用事件委托等完整方案。

纯 HTML 文件双击打开就能用的“留言板”，根本存不住留言——它只是个空壳，没有提交逻辑、没有存储能力、没有动态渲染。想让访客真能留下内容并看到历史记录，必须补上 JavaScript，且至少用 localStorage 做本地持久化。

为什么

直接写在HTML里却点不动或跳转空白页

浏览器对 <form></form> 的默认行为就是提交并跳转，没配 action 就会刷新当前页；配了 action="save.html" 则跳转到那个不存在的文件，显示空白。

• 必须加 onsubmit="return false;" 或用 JS 绑定 event.preventDefault() 拦住默认提交
• <button type="submit"></button> 才能响应回车键，type="button" 不会触发 submit 事件
• 所有要取值的控件（如昵称、留言）必须带 name 属性，id 只供 JS 选元素，不参与表单数据提交
• 别漏掉 <meta charset="utf-8">，否则中文输入可能乱码或截断

localStorage.setItem() 报错 QUOTA_EXCEEDED_ERR 怎么办

这不是代码写错了，是单条留言太长（比如粘贴整段日志）或累计存太多，超出了浏览器给该域名分配的 5–10MB 上限。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 先做长度限制：if (content.length > 2000) { alert("留言不能超过2000字"); return; }
• 存之前用 JSON.stringify()，取出来立刻 JSON.parse()，否则读到的是字符串不是数组
• 首次运行时 localStorage.getItem('messages') 返回 null，直接 JSON.parse(null) 会崩，得判空：const data = JSON.parse(localStorage.getItem('messages') || '[]');
• 隐身窗口默认禁用 localStorage，测试务必用普通窗口

用 innerHTML += 追加留言后，删除按钮失效了

因为 innerHTML += 会把整个容器的 DOM 全重绘一遍，原来绑在旧元素上的事件监听器全部丢失，XSS 风险也高。

• 改用 document.createElement() + appendChild() 或 insertAdjacentElement('beforeend', li)
• 展示用户输入的内容时，永远用 element.textContent = value，不用 innerHTML —— 否则 <script>alert(1)</script> 会真实执行
• 每条留言建议包在 <li class="message" data-timestamp="1722714360"> 里，方便后续加样式、排序、删除
• 删除功能要用事件委托：监听 #messages 容器，判断点击目标是否为 .delete-btn，避免为每条留言单独绑定事件

真正可用的留言板，从来不是“写完 HTML 就完事”。localStorage 容量有限、刷新后数据还在但页面不自动加载、多人共用一台电脑时留言混在一起——这些都不是 bug，是纯前端方案的固有边界。跨设备同步或防刷，就得换 PHP 或 Node.js 接口。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！