箭头函数不能直接封装本地缓存，但适合定义无this依赖的localStorage工具函数，如get/set/remove及带TTL的缓存逻辑，需注意异常处理和适用场景限制。

箭头函数本身不能直接“封装本地缓存”，但它常被用来简洁地定义操作 localStorage 或 sessionStorage 的工具函数。关键不是“用箭头函数封装缓存”，而是用箭头函数写缓存相关的工具方法，保持代码轻量、无 this 依赖、适合工具化场景。

用箭头函数封装基础读写操作

localStorage 只支持字符串，读写需手动处理 JSON 序列化。用箭头函数可快速定义简洁的 get/set/remove：

const cache = {
  get: (key) => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : null;
  },
  set: (key, value) => {
    localStorage.setItem(key, JSON.stringify(value));
  },
  remove: (key) => {
    localStorage.removeItem(key);
  }
};
<p>// 使用
cache.set('user', { id: 123, name: 'Alice' });
console.log(cache.get('user')); // { id: 123, name: 'Alice' }

带过期时间的缓存（箭头函数 + 时间戳）

localStorage 本身不支持自动过期，但可用箭头函数封装「存值+过期时间」逻辑：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const cacheWithTTL = {
  set: (key, value, ttlMs = 60 * 60 * 1000) => {
    const item = {
      value,
      expires: Date.now() + ttlMs
    };
    localStorage.setItem(key, JSON.stringify(item));
  },
  get: (key) => {
    const item = localStorage.getItem(key);
    if (!item) return null;
    const parsed = JSON.parse(item);
    if (Date.now() > parsed.expires) {
      localStorage.removeItem(key);
      return null;
    }
    return parsed.value;
  }
};

避免箭头函数的陷阱：不适用于需要 this 或动态上下文的场景

如果封装的缓存模块需要访问类实例属性（比如自定义 storage 实例、日志开关、加密器），就**不要强行用箭头函数**——它没有自己的 this，会丢失上下文。此时应使用普通函数或 class 方法：

立即学习“Java免费学习笔记（深入）”；

• ✅ 箭头函数适合纯工具函数（无 this、无 new、无 arguments）
• ❌ 不适合在 class 内部定义为箭头方法来操作 this.xxx（容易误以为 this 指向实例，实际可能指向外层）
• ⚠️ localStorage 异常（如配额超限）需 try/catch，箭头函数里也要包住

进阶：组合成可复用的 hook（React 场景）

在 React 中，常用箭头函数配合 useEffect / useState 封装自定义 Hook：

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (e) {
      return initialValue;
    }
  });
<p>const setValue = (value) => {
try {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.error('localStorage write failed:', e);
}
};</p><p>return [storedValue, setValue];
};</p><p>// 组件中使用
function MyComponent() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Switch to {theme === 'light' ? 'dark' : 'light'}</p></button>;
}