纯html无法保存留言，必须依赖服务端或localstorage；用localstorage需正确处理null、字符串化/解析、dom操作及空值校验，否则留言会丢失。

纯 HTML 搭不出能存数据的留言本——它没有执行逻辑、不连数据库、也不处理表单提交，双击 index.html 打开后点“提交”，只会刷新或跳转空白页。

为什么

加了action也存不了留言

常见错误是写成 <form action="save.php"></form> 或 <form action="success.html"></form>，但浏览器根本不会自动执行 PHP，也不会把数据“写进”HTML 文件。它只做一件事：按 action 路径发起 HTTP 请求。如果路径不存在、没服务端响应、或返回的是静态 HTML，就等于什么都没发生。

必须满足两个前提才能真正保存留言：

• 有运行中的服务端（如 PHP + Apache/Nginx，或 Node.js 服务）
• action 指向一个能接收 POST、解析表单、并写入数据库/文件的脚本

否则，<form></form> 只是画了个壳，连 localStorage 都比它强一点——至少后者能在本地记住内容。

用 localStorage 实现“假后端”留言本的关键写法

适合离线练习、单人记录、或快速验证前端流程。核心是绕过服务端，把数据存在浏览器里，但得避开几个高频翻车点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• localStorage.getItem('messages') 第一次返回 null，直接 JSON.parse(null) 会报 Unexpected token 'n' —— 正确写法：const messages = JSON.parse(localStorage.getItem('messages') || '[]');
• localStorage.setItem() 只接受字符串，数组必须先 JSON.stringify()；读取后必须 JSON.parse()，否则拿到的是字符串而非数组
• 用 innerHTML += 动态插入新留言，会清空旧 DOM 节点上的事件监听器（比如删除按钮失效），还可能触发 XSS —— 改用 document.createElement('li') + textContent + appendChild()
• 隐身窗口默认禁用 localStorage，测试务必用普通窗口

textarea 和 button 的最小可用组合

别堆一堆没用的字段。一个能跑通的最简结构只要三样东西：

• <textarea id="message" placeholder="说点什么..."></textarea> —— 必须带 id 或 name，不然 JS 拿不到值
• <button id="submit">发布</button> —— 推荐 type="button"，避免意外触发表单默认提交（尤其没包 <form></form> 时）
• <ul id="list"></ul> —— 留言容器，用 <ul><li></ul> 语义清晰，方便后续加样式和 data 属性

JS 绑定点击事件时，记得第一句写 event.preventDefault()（如果用了 <form></form>）或直接监听 button 的 click，省得纠结 submit 行为。

刷新后留言消失？检查这三处

即使用了 localStorage，留言仍消失，大概率卡在这几个地方：

• 写入前没判断 message.value.trim() === ''，空字符串也被存进去了，读取时解析失败
• 存的时候用了 localStorage.setItem('messages', messages)（漏了 JSON.stringify），导致存进去的是 [object Object]
• 渲染循环里用了 list.innerHTML = '' 再逐条拼接，但某次拼接时变量名写错（比如把 msg.content 写成 msg.contents），整段渲染失败，列表变空

localStorage 不报错、不警告，它默默存下任何你给的字符串——哪怕是你自己造的非法 JSON。最容易被忽略的是：你改了 JS 逻辑，但忘了清空旧的 localStorage 数据，旧格式和新解析方式对不上，结果读出来是 undefined 或空数组。

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