layui.sessionData本身不支持过期时间,仅为sessionStorage封装,需手动添加时间戳和校验逻辑实现过期;推荐封装TimedSession类统一处理,注意iframe隔离性及与layui.data的区别。

layui.sessionData 本身不支持过期时间
这是最常被误解的一点:layui.sessionData 只是对原生 sessionStorage 的一层封装,它没有内置的自动过期机制。调用 layui.sessionData('table', {key: 'k', value: 'v'}) 后,数据会一直留在当前标签页的 sessionStorage 中,直到页面关闭或手动清除。
要实现“带过期时间”的效果,必须自己加时间戳逻辑
和原生 sessionStorage 一样,你需要在写入时存时间戳,在读取时做校验。Layui 没提供现成的 expires 参数,得手动补全:
- 写入时:把值和当前时间戳、过期毫秒数一起序列化后存入
- 读取时:先解析,再比对
Date.now() - timestamp > expires,超时就删并返回null - 别直接覆盖原
layui.sessionData方法——容易破坏 layui 内部逻辑,建议封装新函数
示例(推荐):
由 ReMe 驱动的记忆管理系统,支持跨会话记忆持久化、自动应用用户偏好以及智能上下文压缩...
const TimedSession = {
set(key, value, expiresMs = 30 * 60 * 1000) {
const item = {
data: value,
timestamp: Date.now(),
expires: expiresMs
};
layui.sessionData('timed', { key, value: JSON.stringify(item) });
},
get(key) {
const itemStr = layui.sessionData('timed', { key });
if (!itemStr) return null;
try {
const item = JSON.parse(itemStr);
if (Date.now() - item.timestamp > item.expires) {
layui.sessionData('timed', { key, remove: true });
return null;
}
return item.data;
} catch {
layui.sessionData('timed', { key, remove: true });
return null;
}
}
};
<p>// 使用
TimedSession.set('token', 'abc123', 5 <em> 60 </em> 1000); // 5 分钟
console.log(TimedSession.get('token')); // 超时后返回 null
注意 iframe 弹层中 sessionStorage 的隔离性
如果用 layer.open({type: 2, content: 'form.html'}) 这种 iframe 方式打开弹层,子页的 sessionStorage 和父页是完全隔离的。你在父页用 TimedSession.set() 存的数据,子页读不到;反之亦然。
- 父子页共享数据,得走
parent.sessionStorage或postMessage(但注意跨域限制) - 子页自己也要实现同样的过期校验逻辑,不能依赖父页“代为清理”
- 不要在父页
end回调里直接删子页的sessionStorage——它根本访问不到
别混淆 layui.data 和 layui.sessionData
layui.data('table', ...) 默认操作的是 localStorage,永久存在;layui.sessionData('table', ...) 才对应 sessionStorage。两者 API 一致,但存储介质和生命周期完全不同。
- 如果你需要“关页即失”,必须用
layui.sessionData - 如果你误用了
layui.data并指望它自动过期,那永远都不会清——除非你手动调remove或清空整个表 - 检查是否写错函数名:
sessionData是 layui 2.2.5+ 新增的,旧版本不存在
真正难处理的不是“怎么设过期”,而是“谁来触发校验”。每次 get 都得判断,且不能漏掉任何读取入口——比如表格渲染、表单回填、按钮状态计算,都可能绕过你的封装函数直接调 layui.sessionData。一旦漏一处,过期数据就继续生效。

















