1. 核心概念与区别

• 生命周期：localStorage：数据永久存储，除非用户手动清除（通过浏览器设置或代码调用）。sessionStorage：数据仅在当前会话有效，关闭标签页或浏览器后自动清除。
• 作用域：localStorage：同一域名下的所有页面共享。sessionStorage：仅限当前标签页或窗口，同源的其他标签页无法访问。

2. API 使用

基本操作：

// 存储数据
localStorage.setItem('username', 'Alice');
sessionStorage.setItem('token', 'abc123');

// 读取数据
const user = localStorage.getItem('username'); // 'Alice'
const token = sessionStorage.getItem('token'); // 'abc123'

// 删除数据
localStorage.removeItem('username');
sessionStorage.clear(); // 清空所有sessionStorage数据

存储对象/数组：需使用 JSON 转换：

const settings = { theme: 'dark', fontSize: 14 };
localStorage.setItem('settings', JSON.stringify(settings));

const savedSettings = JSON.parse(localStorage.getItem('settings'));

3. 事件监听

• storage 事件：当同源的其他窗口修改存储时触发，用于跨窗口通信。

window.addEventListener('storage', (event) => {
  console.log('键:', event.key);
  console.log('旧值:', event.oldValue);
  console.log('新值:', event.newValue);
  console.log('触发页面:', event.url);
});

4. 容量限制与错误处理

• 容量：通常约 5MB，不同浏览器可能不同。

错误处理：

try {
  localStorage.setItem('largeData', new Array(1024 * 1024 * 5).join('a'));
} catch (e) {
  console.error('存储失败:', e.message); // 超出容量限制时捕获错误
}

5. 安全与隐私

• 敏感信息：避免存储密码等敏感数据，防止 XSS 攻击。

隐私模式：部分浏览器在隐私模式下可能禁用 Web Storage，需做兼容性检测：

function isLocalStorageSupported() {
  try {
    const testKey = '__test__';
    localStorage.setItem(testKey, testKey);
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

6. 使用场景

• localStorage：用户偏好（如主题、语言）、长期登录状态。
• sessionStorage：表单暂存（防页面刷新丢失）、单页应用临时状态。

7. 对比其他存储方式

8. 最佳实践

封装工具函数：

export const storage = {
  get(key, defaultValue = null) {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : defaultValue;
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  remove(key) {
    localStorage.removeItem(key);
  }
};

• 避免阻塞主线程：大量数据操作可使用 Web Worker 或分批次处理。

示例：表单数据暂存

<form id="myForm">
  <input type="text" name="username" id="username">
  <textarea name="bio" id="bio"></textarea>
</form>

<script>
  // 页面加载时恢复数据
  document.addEventListener('DOMContentLoaded', () => {
    const savedData = sessionStorage.getItem('formData');
    if (savedData) {
      const { username, bio } = JSON.parse(savedData);
      document.getElementById('username').value = username;
      document.getElementById('bio').value = bio;
    }
  });

  // 输入时实时保存
  document.querySelectorAll('#myForm input, #myForm textarea').forEach(element => {
    element.addEventListener('input', () => {
      const formData = {
        username: document.getElementById('username').value,
        bio: document.getElementById('bio').value
      };
      sessionStorage.setItem('formData', JSON.stringify(formData));
    });
  });
</script>

通过以上内容，可以系统掌握 Web Storage 的核心概念、API 使用及实际应用技巧。