刷新后文本域内容清空是浏览器默认行为,需用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 表单重载时避免覆盖已存内容
如果你用了 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 就会误读旧值。


















