js实现留言板功能

留言板这东西，实现看着简单，板功真写起来才发现坑不少。实现我上个月给朋友的板功小公司做个内部工具，就栽在了一个“刷新丢数据”的实现破事上——用户辛辛苦苦敲了五十字吐槽，页面一刷新，板功全没了。实现那种挫败感，板功比用户骂你代码烂还难受。实现所以这次写留言板，板功我直接把数据存进localStorage，实现刷新、板功关浏览器、实现甚至重启电脑，板功留言都还在。实现

先把最核心的DOM结构搭出来。一个textarea让用户输入，一个button负责提交，下面挂一个ul当留言列表的容器。别急着加样式，丑点没关系，功能跑通了再打扮。我习惯把这三个元素用id标记清楚，比如#msgInput、#sendBtn、#msgList，后面JavaScript找它们就省事。

关键逻辑就两步：提交时把内容存起来，页面加载时把存的内容渲染出来。存，我用localStorage.setItem，把留言数组转成JSON字符串塞进去。取，用localStorage.getItem，再JSON.parse回来。这里有个细节容易忽略——第一次访问时localStorage里根本没有这个key，所以取数据前一定要判断一下，是空就返回一个空数组，否则parse一个null会直接报错，白屏给你看。

写提交事件的时候，我习惯先清空输入框，再重新渲染整个列表。有人觉得每次都全量渲染性能差，但留言板这种轻量场景，几十条数据根本无所谓。倒是有一个点必须防着——用户按回车提交，或者连点两次按钮，会重复插入同一条留言。解决办法很简单，提交后立刻禁用按钮0.5秒，或者用时间戳做个去重判断。我选择了后者，因为更贴近真实场景：有人就是喜欢狂按回车。

渲染函数里，我用了createElement和appendChild，没用innerHTML字符串拼接。为啥？因为用户输入的纯文本里如果带尖括号，比如“