localStorage数据不会自动过期，需手动清除或封装带时间戳的读写逻辑；不适合存敏感信息、大量数据或依赖强一致性的场景。
localStorage 的数据不会自动过期
除非用户主动清除（比如手动清浏览器缓存、调用 localStorage.clear() 或 localStorage.removeItem()），否则 localStorage 中的数据会一直保留在设备上，关机、重启、关浏览器、甚至重装系统（只要没格式化硬盘且浏览器用户目录未被删除）都不影响它。它没有内置的 TTL（Time-To-Live）机制，也不支持设置过期时间。
哪些操作会导致 localStorage 数据丢失
看似“持久”，但实际依赖浏览器环境和用户行为。常见意外清空场景包括：
- 用户在浏览器设置中点击「清除浏览数据」并勾选了「Cookie 及其他网站数据」或「缓存的图像和文件」（Chrome/Firefox 默认连带清除
localStorage） - 使用隐私模式（无痕窗口）后关闭窗口——该会话的
localStorage立即销毁 - 网站被用户从「站点设置」中手动重置权限，或在地址栏点击锁形图标 → 「清除数据」
- 某些企业级浏览器策略或安全插件会定期清理本地存储
- 移动端 Safari 在 iOS 15+ 中，若网站 7 天内未被访问，可能触发自动清理（仅限低容量设备或存储压力大时，非强制规则）
想实现带过期时间的本地存储怎么办
必须自己封装逻辑。核心思路是：写入时存时间戳，读取时校验是否过期。注意避免直接覆盖原生 localStorage.setItem，以免影响其他模块。
function setWithExpiry(key, value, ttlMs) {
const item = {
value: value,
expiry: Date.now() + ttlMs
};
localStorage.setItem(key, JSON.stringify(item));
}
<p>function getWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
const item = JSON.parse(itemStr);
if (Date.now() > item.expiry) {
localStorage.removeItem(key);
return null;
}
return item.value;
}</p><p>// 示例：存一个 5 分钟后过期的 token
setWithExpiry('auth_token', 'abc123', 5 <em> 60 </em> 1000);
console.log(getWithExpiry('auth_token')); // 5 分钟内有效，超时返回 null</p>localStorage 不适合存什么
它不是数据库，也非加密存储，有明确边界：
立即学习“前端免费学习笔记（深入）”；
- 不存敏感信息：如密码、支付令牌、身份证号——
localStorage是纯文本、同源可读、无访问控制 - 不存大量数据：单域名上限通常 5–10MB（Chrome 约 10MB，Safari 移动端约 5MB），超限会抛
QuotaExceededError - 不依赖强一致性：跨标签页写入可能有竞态（比如两个标签同时
setItem），且事件storage监听只在其他标签页触发，当前页不响应 - 不替代服务端状态：页面刷新后虽数据尚在，但服务端 session 可能已失效，需配合校验
真正需要“长期+可靠+带过期”的客户端缓存，得考虑 Cache API 配合 Service Worker，或者把关键状态交由后端维护，前端只做轻量级本地快照。localStorage 的定位很清晰：简单、同源、手动管理的键值快照。别给它加戏。
