【前端面试系列】Web 本地存储全面详解

一、本地存储方案概述

现代 Web 应用中常用的本地存储方案主要包括：

• Cookie
• Web Storage (localStorage / sessionStorage)
• IndexedDB
• Web SQL Database (已废弃)
• Cache API
• File System API

二、详细介绍

1. Cookie

1.1 基本概念

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据。它会在浏览器下次向同一服务器发起请求时被携带并发送到服务器上。

1.2 核心属性

• Name: Cookie 的名称
• Value: Cookie 的值
• Domain: 可以访问该 Cookie 的域名
• Path: 可以访问该 Cookie 的页面路径
• Expires/Max-Age: Cookie 的过期时间
• Size: Cookie 的大小不能超过 4KB
• HttpOnly: 设置了 HttpOnly 属性的 cookie 不能通过 JavaScript 访问
• Secure: 只有在 HTTPS 协议下才能传输
• SameSite: 防止 CSRF 攻击和用户追踪

1.3 使用示例

// 设置 Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 获取 Cookie
const getCookie = (name) => {
  const cookies = document.cookie.split(';');
  for(let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=');
    if(cookieName.trim() === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
};

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

2. Web Storage

2.1 localStorage

特点：

• 持久化存储，数据永久保存
• 存储容量通常为 5-10MB
• 同源策略限制
• 仅支持字符串存储

// 存储对象
localStorage.setItem('user', JSON.stringify({name: 'John', age: 30}));

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

// 监听存储变化
window.addEventListener('storage', (e) => {
  console.log('Storage changed:', e.key, e.newValue, e.oldValue);
});

2.2 sessionStorage

特点：

• 会话级存储，关闭标签页即清除
• 容量与 localStorage 相同
• 同一个会话中的页面才能访问相同的数据

3. IndexedDB

3.1 特点

• 支持索引和事务
• 支持二进制存储
• 异步操作
• 支持版本控制

3.2 基本使用示例

// 打开数据库
const request = indexedDB.open("MyDatabase", 1);

request.onerror = (event) => {
  console.error("Database error: " + event.target.error);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // 使用数据库
};

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

三、存储方案对比

四、常见面试题

1. localStorage 和 sessionStorage 的区别？

答：主要区别在于：

1. 生命周期不同：localStorage 永久存储，sessionStorage 仅在会话期间有效
2. 作用域不同：sessionStorage 仅在同一标签页中共享，localStorage 在同源的所有标签页共享
3. 存储事件：localStorage 的修改会触发其他页面的 storage 事件，sessionStorage 不会

2. Cookie 和 Web Storage 的区别？

答：主要区别：

1. 容量限制不同：Cookie 4KB，Web Storage 5-10MB
2. 是否随请求发送：Cookie 会自动随请求发送，Web Storage 不会
3. 操作方式：Cookie 操作相对复杂，Web Storage API 简单直观
4. 数据访问：Cookie 可以服务器端设置，Web Storage 仅客户端可访问

3. 如何实现 localStorage 的过期功能？

答：可以封装一个带过期时间的存储方法：

const storage = {
  set(key, value, expires) {
    const data = {
      value,
      expires: expires ? new Date().getTime() + expires : null
    };
    localStorage.setItem(key, JSON.stringify(data));
  },
  
  get(key) {
    const data = JSON.parse(localStorage.getItem(key));
    if (data) {
      if (data.expires && data.expires < new Date().getTime()) {
        localStorage.removeItem(key);
        return null;
      }
      return data.value;
    }
    return null;
  }
};

4. 如何处理 localStorage 的容量超出问题？

答：可以采用以下策略：

1. 实现 LRU 缓存淘汰算法
2. 压缩数据后再存储
3. 分片存储大数据
4. 及时清理无用数据

// LRU 缓存示例
class LRUStorage {
  constructor(limit = 5) {
    this.limit = limit;
    this.cache = new Map();
  }

  set(key, value) {
    if (this.cache.size >= this.limit) {
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
    this.cache.delete(key);
    this.cache.set(key, value);
    this.syncToStorage();
  }

  private syncToStorage() {
    localStorage.setItem('cache', JSON.stringify([...this.cache]));
  }
}

五、最佳实践建议

1. 根据数据特性选择合适的存储方式：

   • 用户标识、认证信息：Cookie
   • 临时数据：sessionStorage
   • 应用配置、主题设置：localStorage
   • 大量结构化数据：IndexedDB

2. 安全性考虑：

   • 敏感数据加密存储
   • 设置 Cookie 的 HttpOnly 和 Secure 属性
   • 定期清理过期数据

3. 性能优化：

   • 避免存储过大数据
   • 合理使用序列化和反序列化
   • 批量操作时使用事务

写在最后

感谢您花时间阅读这篇文章!