js做一个简单的留言板

一个文本框，简单一个按钮，言板再加一个列表，简单这就是言板留言板的全部骨架。用原生JavaScript写，简单不依赖任何框架，言板总共不到一百行代码。简单我见过太多人一上来就Vue、言板React，简单结果连DOM事件绑定都没弄明白。言板

先看HTML结构。简单需要一个输入框让用户打字，言板需要一个按钮触发提交，简单还得有个容器来展示留言。言板别用form表单，简单因为刷新页面会丢失所有数据，体验太差。我用一个div当容器，里面放个textarea，再配个button，完事。

<div id="app"> <textarea id="input" placeholder="说点什么..."></textarea> <button id="submit">发布</button> <ul id="list"></ul> </div>

接下来是JavaScript核心逻辑。第一步，拿到DOM元素。第二步，给按钮绑定click事件。第三步，把输入框的值塞进列表里。就这么简单，但有个坑——如果用户输入空字符串或者全是空格，你得拦下来。用trim()方法处理一下，空值直接return，弹个提示也行，但我觉得在按钮旁边放个小红字更友好。

const input = document.getElementById('input'); const submit = document.getElementById('submit'); const list = document.getElementById('list'); submit.addEventListener('click', function() {  const text = input.value.trim(); if (!text) {  alert('内容不能为空'); return; } const li = document.createElement('li'); li.textContent = text; list.appendChild(li); input.value = ''; });

写到这儿，基本的留言功能已经跑通了。但有个致命问题——刷新页面，留言全没了。这就像你在纸上写字，橡皮一擦就干净。要持久化，得用localStorage。每次添加留言时，把当前数组存进去，页面加载时，再从localStorage里读出来渲染。

let messages = JSON.parse(localStorage.getItem('messages')) || []; function render() {  list.innerHTML = ''; messages.forEach(msg => {  const li = document.createElement('li'); li.textContent = msg; list.appendChild(li); }); } submit.addEventListener('click', function() {  const text = input.value.trim(); if (!text) return; messages.push(text); localStorage.setItem('messages', JSON.stringify(messages)); render(); input.value = ''; }); render();

现在聊聊细节。留言的顺序，我习惯新的在最上面，这样一眼能看到最新内容。用unshift替代push就行。另外，每条留言加个删除按钮，鼠标移上去显示叉号，点击就移除。这需要事件委托，直接在ul上监听click，判断target是不是删除按钮。别给每个li单独绑事件，那样性能差，代码也冗余。

样式方面，我不想用CSS框架，手写几行就够。给textarea设个宽度和高度，按钮放旁边，留言列表加点间距。背景色用浅灰，字体用系统默认的sans-serif，别整花里胡哨的。用户真正关心的是功能，不是视觉特效。

最后说个实际体验。我测试的时候发现，如果留言内容很长，比如粘贴了一段代码，列表会撑破容器。解决办法是给li加word-break: break-all，或者overflow-wrap: anywhere。另外，按回车键提交是很多用户的习惯，但我没做这个功能，因为textarea需要回车换行。如果要做，得监听keydown事件，判断event.key === 'Enter'且不按Shift，但这样会牺牲换行能力，取舍看需求。

这个留言板能商用吗？不能。它没有后端，数据只存在浏览器里，换台电脑就没了。但作为学习JavaScript交互的练习，它把事件绑定、DOM操作、本地存储、数组方法全串起来了。我见过有人用这个demo去面试，讲清楚每一步的原理，比背十道算法题都管用。代码就摆在这儿，但你要真去敲一遍，遇到bug自己排查，才算学会。