封装存储管理器可统一处理序列化与异常；2. 通过附加时间戳实现过期机制；3. 监听storage事件同步多标签页数据；4. 避免存储大量数据以提升性能。
LocalStorage 是前端开发中常用的浏览器存储方案，虽然基础用法简单，但掌握一些进阶技巧能显著提升使用效率和代码健壮性。下面介绍几种实用的 LocalStorage 进阶用法。
1. 封装统一的存储管理器
直接使用 localStorage.getItem 和 setItem 容易出错且重复代码多。建议封装一个工具类或函数，统一处理数据序列化、类型转换和异常情况。
示例： ```javascript const Storage = { set(key, value) { try { const serializedValue = JSON.stringify(value); localStorage.setItem(key, serializedValue); } catch (error) { console.warn(`保存 ${key} 失败`, error); } }, get(key) { try { const item = localStorage.getItem(key); return item ? JSON.parse(item) : null; } catch (error) { console.warn(`读取 ${key} 失败`, error); return null; } }, remove(key) { localStorage.removeItem(key); }, clear() { localStorage.clear(); } }; ```这样可以避免手动处理 JSON 转换，并统一捕获可能的异常（如序列化失败或超出配额）。
2. 设置过期时间
LocalStorage 本身不支持过期机制，但可以通过在存储时附加时间戳来实现“伪过期”功能。
实现方式： ```javascript const ExpirableStorage = { set(key, value, ttl = 60 * 60 * 1000) { // 默认1小时 const record = { value, expiry: Date.now() + ttl }; localStorage.setItem(key, JSON.stringify(record)); }, get(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;} };
这个方法适用于缓存短期数据，比如用户偏好、临时 token 等。
移动端无限滚动加载瀑布流下载里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。
3. 监听存储变化
当其他标签页修改了 LocalStorage，当前页面可通过监听 storage 事件感知变更。
```javascript window.addEventListener('storage', (event) => { if (event.key === 'userInfo') { console.log('用户信息已更新:', event.newValue); // 可在此同步刷新页面状态 } });
注意：
- 该事件只在其他标签页触发修改时才会触发，当前页面调用 setItem 不会触发。
- event 的 newValue 在删除时为 null。
4. 避免存储大量数据
LocalStorage 通常限制在 5-10MB，存储过多数据会影响性能，甚至导致写入失败。
建议：- 优先存储关键小数据，如用户设置、主题、token。
- 大对象考虑使用 IndexedDB。
- 定期清理无用数据，尤其是带过期机制的缓存。
基本上就这些。合理封装、控制体积、加上过期和监听机制，能让 LocalStorage 更安全高效地服务于你的应用。
