JavaScript 封装localStorage完整指南（建议收藏）

关于封装localStorage，你可能只知道一半

前两天帮同事排查一个 bug，最后定位到问题出在封装localStorage上。类似的坑我见过不止一次，索性把封装localStorage相关的经验整理成这篇文章，希望对你有帮助。

关于封装localStorage的关键知识

1. 封装localStorage的学习要理论结合实践，看懂和写对是两码事。
2. 团队里推广封装localStorage的正确用法，比一个人用得好更有价值。
3. 用封装localStorage处理并发场景时要格外小心，确认它是否线程安全。
4. 上线前对封装localStorage相关的功能做一轮完整测试，别只测正常流程。
5. 对封装localStorage的输入做校验，永远不要相信外部传入的数据。

聊完原理，实践部分来了。

封装localStorage代码示例

下面通过带过期时间的 localStorage 封装来实际演示一下：

const store = {
  set(k, v, exp = 0) {
    localStorage.setItem(k, JSON.stringify({ v, exp: exp ? Date.now() + exp : 0 }));
  },
  get(k) {
    const o = JSON.parse(localStorage.getItem(k) || 'null');
    if (!o) return null;
    if (o.exp && o.exp < Date.now()) { localStorage.removeItem(k); return null; }
    return o.v;
  }
};
store.set('token', 'abc123', 3600 * 1000);

这些细节要注意

• 上线前在预发布环境完整跑一遍，很多环境问题会提前暴露。
• 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。

结语

本文示例都经过实际验证，可以放心参考。如果你在封装localStorage的使用中发现了新的坑，欢迎补充分享。

---

遇见问题加 QQ23979811 协助处理