Web Storage（'localStorage'与'sessionStorage'）

Web Storage 是 HTML5 引入的一种客户端存储机制，包含 localStorage 和 sessionStorage 两种对象。它们允许开发者在浏览器中存储键值对数据，无需依赖服务器或 Cookie。两者的主要区别在于数据的作用域和生命周期，适用于不同的业务场景。

localStorage 的基本特性

localStorage 提供了一种持久化存储方案，数据会一直保留在浏览器中，除非手动清除或通过代码删除。它的存储容量通常为 5MB 左右（不同浏览器可能有差异），且遵循同源策略（Same-Origin Policy）。

数据操作方法

localStorage 提供了简单的 API 来操作数据：

// 存储数据
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

// 读取数据
const username = localStorage.getItem('username'); // "Alice"
const nonExistent = localStorage.getItem('token'); // null

// 删除单个键值
localStorage.removeItem('theme');

// 清空所有数据
localStorage.clear();

实际应用场景

1. 用户偏好设置：存储主题、语言等配置
2. 离线数据缓存：保存应用状态或部分数据
3. 表单草稿：防止用户意外关闭页面导致输入丢失

// 自动保存表单内容
const form = document.getElementById('settings-form');

form.addEventListener('input', () => {
  const formData = new FormData(form);
  localStorage.setItem('formDraft', JSON.stringify(Object.fromEntries(formData)));
});

// 页面加载时恢复
window.addEventListener('load', () => {
  const draft = localStorage.getItem('formDraft');
  if (draft) {
    const data = JSON.parse(draft);
    for (const [name, value] of Object.entries(data)) {
      if (form.elements[name]) {
        form.elements[name].value = value;
      }
    }
  }
});

sessionStorage 的核心特点

sessionStorage 与 localStorage 的 API 完全一致，但数据生命周期仅限于当前会话。当标签页或浏览器关闭时，存储的数据会自动清除。每个标签页都有独立的存储空间，即使是同源页面也不会共享。

典型使用场景

1. 单页应用临时状态：存储当前工作阶段的状态
2. 敏感信息临时存储：比 localStorage 更安全
3. 页面间一次性传递数据：替代 URL 参数

// 登录后存储临时令牌
function handleLogin(response) {
  sessionStorage.setItem('authToken', response.token);
  sessionStorage.setItem('userRole', response.role);
}

// 检查会话状态
function checkAuth() {
  return !!sessionStorage.getItem('authToken');
}

// 标签页间通信示例
window.addEventListener('storage', (event) => {
  if (event.key === 'broadcastMessage' && event.newValue) {
    sessionStorage.setItem('lastMessage', event.newValue);
  }
});

两种存储的对比分析

高级用法与注意事项

对象存储策略

Web Storage 只能存储字符串，存储对象时需要序列化：

const user = {
  id: 123,
  name: 'Bob',
  preferences: { theme: 'light', fontSize: 14 }
};

// 存储对象
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));

存储事件监听

可以监听其他窗口对存储的修改：

window.addEventListener('storage', (event) => {
  console.log(`键 ${event.key} 被修改`);
  console.log(`旧值: ${event.oldValue}`);
  console.log(`新值: ${event.newValue}`);
  console.log(`来源: ${event.url}`);
});

性能优化技巧

1. 批量操作：减少频繁的小数据写入
2. 数据压缩：对大文本使用压缩算法
3. 清理策略：定期清理过期数据

// 批量操作示例
function saveBatchData(items) {
  const batch = {};
  items.forEach(item => {
    batch[item.id] = item;
  });
  localStorage.setItem('itemBatch', JSON.stringify(batch));
}

// 使用LZString压缩
const compressed = LZString.compress(JSON.stringify(largeData));
localStorage.setItem('compressedData', compressed);

常见问题解决方案

存储空间不足

当超出存储限制时会抛出 QuotaExceededError：

try {
  localStorage.setItem('bigData', hugeString);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('存储空间不足');
    // 实施清理策略或提示用户
  }
}

隐私模式下的行为

某些浏览器在隐私模式下会：

1. 提供空的存储对象
2. 抛出错误但静默失败
3. 限制存储空间

function isStorageAvailable(type) {
  try {
    const storage = window[type];
    const testKey = '__storage_test__';
    storage.setItem(testKey, testKey);
    storage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

if (!isStorageAvailable('localStorage')) {
  // 使用替代方案
}

浏览器兼容性与替代方案

所有现代浏览器都支持 Web Storage，包括：

• Chrome 4+
• Firefox 3.5+
• Safari 4+
• IE 8+
• Edge 12+

对于需要更大容量或更复杂查询的场景，可以考虑：

1. IndexedDB：结构化数据存储
2. WebSQL（已废弃）：关系型存储
3. Cookies：小数据且需要服务器访问时

// IndexedDB 简单示例
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  
  store.put({ id: 1, name: 'Alice' });
};

安全最佳实践

1. 不要存储敏感信息：如密码、信用卡号等
2. 实施数据验证：读取时验证数据完整性
3. 考虑加密：对重要数据进行加密

// 简单加密示例（实际应使用更安全的算法）
function simpleEncrypt(text, key) {
  return text.split('').map(c => 
    String.fromCharCode(c.charCodeAt(0) ^ key.charCodeAt(0))
  ).join('');
}

const secret = 'confidential';
const encrypted = simpleEncrypt(secret, 'myKey');
localStorage.setItem('encryptedData', encrypted);

// 解密
const stored = localStorage.getItem('encryptedData');
const decrypted = simpleEncrypt(stored, 'myKey');