JavaScript Cookie操作封装快速上手指南（附代码示例）

为什么要掌握Cookie操作封装？

很多线上 Bug 的根源，都在于对Cookie操作封装的理解不够深入。本文从常见错误出发，反推正确的使用姿势。

Cookie操作封装 的核心要点

• 注意Cookie操作封装在边界条件下的表现，例如空数据、超长数据等特殊情况。
• 优先使用官方文档推荐的方式实现Cookie操作封装，不要随意复制来源不明的代码片段。
• 涉及Cookie操作封装的代码建议封装成函数或工具类，方便复用和后期统一修改。

Cookie操作封装 代码示例

带过期时间的 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);

常见问题与注意事项

• 接口返回异常时，先用工具单独请求接口确认数据，再排查调用方的逻辑。
• 不要一次性改太多代码再测试，小步修改、及时验证，是最高效的调试方式。

总结

本文从概念、要点到示例，完整讲解了Cookie操作封装的使用方法。建议动手把示例跑一遍，加深理解。

遇见问题加 QQ23979811 协助处理