刷新后文本域内容清空是浏览器默认行为，需用localstorage配合id实现自动恢复：①设唯一id；②加载时读取填充；③监听input事件实时保存；④注意form重载时机与localstorage清理。

刷新后文本域内容清空，是因为没存到持久化位置

页面刷新时 textarea 的 value 会重置为初始 HTML 值（通常是空），Layui 自身不接管表单控件状态保存。你看到的“内容消失”，不是 bug，是浏览器默认行为——除非你主动把内容存下来、再取回来。

用 localStorage + id 属性做最简恢复

不需要额外插件或框架，三步就能让文本域在刷新后还原上次输入：

• 给 textarea 加唯一 id（比如 id="news-content"）
• 页面加载时从 localStorage 读取并填入：$('#news-content').val(localStorage.getItem('news-content') || '')
• 监听输入事件，实时存入：$('#news-content').on('input', function() { localStorage.setItem('news-content', $(this).val()); });

注意：别用 change 事件——它只在失焦时触发，用户刷新前没失焦就白存了；input 才能覆盖所有输入场景（包括粘贴、删除、中文输入法上屏）。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

配合 Layui 表单重载时避免覆盖已存内容

如果你用了 form.render() 或整个表单被模板重绘（比如搜索后 reload 区域），textarea DOM 可能被重建，导致刚存的 localStorage 值还没来得及读取就被清空。这时要确保：

• form.render() 调用之后，再执行一次 $('#news-content').val(...) 恢复逻辑
• 如果用的是 lay-module="form" 的自动渲染，把恢复逻辑放在 form.on('submit(...)') 回调之后，或 done 渲染完成钩子中
• 避免在 textarea 外层容器的 innerHTML = ... 操作——这会直接销毁 DOM 节点，连事件监听都丢了

编辑页关闭前清空对应 localStorage 键值

文本域内容属于临时草稿，不是永久数据。用户提交成功或取消编辑后，应主动清理，防止下次打开还显示旧草稿：

• 提交成功回调里加：localStorage.removeItem('news-content');
• 弹窗关闭（如 layer.close()）前也执行同样清理
• 如果多个文本域共用同一页面，建议用更细粒度的键名，比如 'news-content-' + articleId，避免互相污染

真正容易被忽略的点是：localStorage 不区分页面路径，同域名下所有页共享同一个存储空间。一个编辑页没清理，另一个页的同名 id 就会误读旧值。