Web存储API

1. Web 存储对比

2. localStorage

localStorage.setItem('name', 'Alice');
localStorage.getItem('name'); // 'Alice'
localStorage.removeItem('name');
localStorage.clear();

// 存储对象
const storage = {
  get(key, defaultValue = null) {
    const value = localStorage.getItem(key);
    if (value === null) return defaultValue;
    try {
      return JSON.parse(value);
    } catch {
      return value;
    }
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
};

storage.set('settings', { theme: 'dark' });
storage.get('settings'); // { theme: 'dark' }

// 跨标签页监听
window.addEventListener('storage', (e) => {
  console.log(e.key, e.oldValue, e.newValue);
});

3. Cookie

document.cookie = 'name=Alice; max-age=86400; path=/; secure; SameSite=Strict';

// 解析
function getCookies() {
  return document.cookie.split('; ').reduce((acc, pair) => {
    const [key, value] = pair.split('=');
    acc[decodeURIComponent(key)] = decodeURIComponent(value);
    return acc;
  }, {});
}

// 删除
document.cookie = 'name=; max-age=0; path=/';