textarea内容需手动监听input事件并回填localStorage，否则刷新丢失；必须页面加载时读取、输入时实时保存、提交成功后精准清除对应key。
textarea 的内容不能靠 localStorage 自动保存，必须显式监听并序列化——否则刷新后全丢。
为什么直接用 localStorage.setItem() 存 textarea 值总失效
不是 API 有问题，而是常漏掉两个关键点：一是没在页面加载时主动回填，二是没监听 input 事件（仅用 change 会错过实时输入）。textarea 和普通 input 一样，值变更不会自动触发存储，必须手动抓取 .value。
- 只在表单提交时存一次？用户中途刷新就白写了
- 用
change事件？用户还没失焦就关闭页面，最后一段文字根本没存进去 - 没做 DOM 加载后回填？
localStorage里有数据，但页面打开时textarea还是空的
textarea 实时缓存的最小可行代码
以下逻辑覆盖从读取、监听到写入的闭环，不依赖框架，兼容所有现代浏览器：
const textarea = document.querySelector('textarea[name="content"]');
const key = 'form_draft_content';
// 页面加载时回填
if (textarea && localStorage.getItem(key)) {
textarea.value = localStorage.getItem(key);
}
// 实时保存（注意：用 input，不是 change）
if (textarea) {
textarea.addEventListener('input', () => {
localStorage.setItem(key, textarea.value);
});
}
- key 名建议带业务前缀（如
form_draft_），避免和其他模块冲突 - 如果页面有多个
textarea，别硬编码name，改用data-cache-key属性动态取 key - 移动端软键盘收起时机可能导致最后一次
input事件延迟触发，可加blur作为兜底
多字段表单中 textarea 如何统一管理
当 textarea 和其他控件（input、select、复选框）共存时，单独为每个 textarea 写监听太冗余。推荐封装成对象再整体存取：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
function saveFormState(form) {
const data = {};
form.querySelectorAll('input, select, textarea').forEach(el => {
const name = el.name || el.id;
if (!name) return;
if (el.tagName === 'TEXTAREA') {
data[name] = el.value;
} else if (el.type === 'checkbox' || el.type === 'radio') {
data[name] = el.checked;
} else {
data[name] = el.value;
}
});
localStorage.setItem('form_state_v1', JSON.stringify(data));
}
// 页面加载时恢复
const saved = localStorage.getItem('form_state_v1');
if (saved) {
const data = JSON.parse(saved);
Object.entries(data).forEach(([name, value]) => {
const el = form.elements[name];
if (el && el.tagName === 'TEXTAREA') el.value = value;
});
}
- 不要用
JSON.stringify()包整个表单 DOM，只序列化值；否则可能因 DOM 变化导致解析失败 - 版本号（如
v1）必须显式加在 key 里，后续字段增减时可安全弃用旧数据 -
form.elements[name]比querySelector更可靠，能正确匹配radio组和select[multiple]
提交成功后必须清除缓存，但别用 localStorage.clear()
localStorage.clear() 是核弹级操作——它会干掉当前域名下所有其他功能用到的本地数据（比如用户主题偏好、token 缓存、埋点开关）。只清本表单相关项才安全：
- 提交前调用
localStorage.removeItem('form_draft_content')或localStorage.removeItem('form_state_v1') - 如果用了带前缀的 key（如
form_draft_*），可用正则遍历清除：Object.keys(localStorage).filter(k => k.startsWith('form_draft_')).forEach(k => localStorage.removeItem(k)) - 千万别在
submit事件里直接clear()，除非你确认这个域名下只有这一个表单
真正容易被忽略的是：缓存清理必须发生在服务器返回成功响应之后，而不是点击提交按钮那一刻——网络失败时保留草稿才是对用户负责。
