JavaScript数据持久化_LocalStorage封装

class StorageUtil {
  static set(key, value) {
    try {
      const serialized = JSON.stringify(value);
      localStorage.setItem(key, serialized);
    } catch (error) {
      console.warn(`保存 ${key} 失败`, error);
    }
  }
<p>static get(key) {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
} catch (error) {
console.warn(<code>读取 ${key} 失败</code>, error);
return null;
}
}</p><p>static remove(key) {
localStorage.removeItem(key);
}</p><p>static clear() {
localStorage.clear();
}
}</p>

StorageUtil.set('user', { name: 'Alice', age: 25 });
const user = StorageUtil.get('user'); // 直接返回对象

class StorageUtil {
  // ... 其他方法
<p>static setWithExpire(key, value, ttlMs) {
const now = Date.now();
const item = {
value,
expire: now + ttlMs
};
try {
localStorage.setItem(key, JSON.stringify(item));
} catch (error) {
console.warn(<code>保存带过期的 ${key} 失败</code>, error);
}
}</p><p>static getWithExpire(key) {
try {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;</p><pre class='brush:php;toolbar:false;'>  const item = JSON.parse(itemStr);
  if (Date.now() > item.expire) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
} catch (error) {
  console.warn(`读取带过期的 ${key} 失败`, error);
  return null;
}

// 10分钟后过期
StorageUtil.setWithExpire('token', 'abc123', 10 * 60 * 1000);
const token = StorageUtil.getWithExpire('token');

window.addEventListener('storage', (event) => {
  if (event.key === 'user') {
    console.log('用户数据被其他页面修改:', event.newValue);
  }
});