如何通过动手编写 50 行代码实现一个完全兼容原生 API 且支持 TTL 过期的 EnhancedStorage 库-js教程-PHP中文网

enhancedstorage是兼容localstorage原生api、支持ttl自动过期的轻量封装，50行内实现：setitem/getitem等方法行为与返回值完全一致，写入时嵌入过期时间戳，读取时懒检查并自动清理过期项。

用 50 行代码实现一个真正兼容 localstorage 原生 api、支持 ttl（自动过期）的 enhancedstorage，关键不在“写得多”，而在“选得准”——只封装核心行为，不重造轮子，复用浏览器原生能力。

✅ 完全兼容原生 API 的本质

不是另起一套方法名，而是让 setItem、getItem、removeItem、clear、key、length 全部行为和返回值与原生一致。这意味着：

传入非字符串 key/value 时自动调用 JSON.stringify 存储，读取时自动 JSON.parse（但对纯字符串保持透明）
length 和 key(i) 只统计未过期项
所有方法必须同步执行（TTL 检查在读/删时触发，不依赖定时器）

⏰ TTL 过期机制：懒检查 + 时间戳嵌入

不启动任何后台定时器（避免内存泄漏和精度问题），而是在每次 getItem 或 removeItem 时，解析存储值中的过期时间戳，即时判断是否过期：

写入时：把原始值包装为 { v: value, e: Date.now() + ttlMs }
读取时：若 e 存在且 Date.now() > e，则视为已过期 → 删除该键并返回 null
这样既精准，又无额外开销

? 50 行可运行实现（含注释）

以下为严格控制在 50 行内的完整实现（ES6+，现代浏览器）：

const EnhancedStorage = (function () {
  const raw = localStorage;
  const now = () => Date.now();
<p>const wrap = (v, ttl) => ttl ? { v, e: now() + ttl } : v;
const unwrap = (x) => {
if (x && typeof x === 'object' && 'e' in x && x.e </p><p>return {
setItem(k, v, ttl) {
try {
raw.setItem(k, JSON.stringify(wrap(v, ttl)));
} catch (e) {}
},
getItem(k) {
try {
const x = raw.getItem(k);
return x ? unwrap(JSON.parse(x)) : null;
} catch (e) {
return null;
}
},
removeItem(k) {
raw.removeItem(k);
},
clear() {
raw.clear();
},
key(i) {
return raw.key(i);
},
get length() {
let n = 0;
for (let i = 0; i </p>