表单提交后页面刷新导致留言丢失，因HTML无后端支持，需用event.preventDefault()阻止默认行为，并结合DOM操作或localStorage实现本地存储与显示。
表单提交后页面刷新，留言没保存到页面上
HTML 本身不处理数据存储，<form> 默认用 GET 或 POST 提交到服务器，但本地直接双击打开的 index.html 没有后端，所以提交后要么跳转失败，要么刷新丢数据。这不是你代码写错了，是缺了运行环境。
临时验证逻辑可用 event.preventDefault() 阻止刷新，配合 JavaScript 把留言塞进页面：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const msg = document.getElementById('message').value;
const list = document.getElementById('msg-list');
const li = document.createElement('li');
li.textContent = msg;
list.appendChild(li);
document.getElementById('message').value = '';
});
- 确保
<form>里有<input id="message">和<ul id="msg-list"> - 别忘了把这段 JS 放在 HTML 底部，或加
defer属性，否则可能找不到元素 - 这种纯前端方式刷新即丢失，仅适合演示逻辑
想本地存留言，该用 localStorage 还是 sessionStorage
localStorage 持久保存，关浏览器也不丢；sessionStorage 只在当前标签页有效，关闭即清空。做简易留言板，选 localStorage 更合理。
读写示例：
立即学习“前端免费学习笔记（深入）”；
// 保存
const msgs = JSON.parse(localStorage.getItem('messages') || '[]');
msgs.push(document.getElementById('message').value);
localStorage.setItem('messages', JSON.stringify(msgs));
// 加载（页面加载时执行）
const saved = JSON.parse(localStorage.getItem('messages') || '[]');
saved.forEach(txt => {
const li = document.createElement('li');
li.textContent = txt;
document.getElementById('msg-list').appendChild(li);
});
- 必须用
JSON.stringify和JSON.parse，因为localStorage只存字符串 - 首次读取时
getItem返回null，所以要|| '[]'防报错 - 超过 5MB 会抛
QuotaExceededError，但几十条留言完全没问题
提交按钮点击没反应，控制台报 Cannot read property 'addEventListener' of null
这是 DOM 元素没找到，最常见的原因是：JS 代码执行时，目标元素还没加载出来。
- 检查 HTML 中
<form>是否真有id="my-form"（如果你 JS 里写的是document.getElementById('my-form')） - ID 名大小写、拼写、是否多空格都要核对，
getElementById区分大小写 - 把
<script>标签移到</body>前，或给<script src="...">加defer - 别在
<head>里直接写内联脚本并操作 DOM，除非包一层DOMContentLoaded
样式太简陋，怎么快速加点基础排版不学 CSS
不用写一行 CSS，直接用浏览器默认样式微调，够用且零学习成本。
- 给
<form>加style="margin: 1em 0;"控制上下间距 - 留言列表用
<ol>替代<ul>，自动带序号，语义也更准 - 输入框加
style="width: 100%; padding: 6px;"，避免窄得输不了几字 - 所有文字用
<p>包裹，比裸文本更易读，也方便以后加样式
真正卡住的往往不是技术，而是误以为“必须立刻做出美观界面”。先把功能跑通，再动样式——多数人卡在第一步就停住了。
