Web Storage API

概述

浏览器提供多种存储机制，各有适用场景。

一、存储类型对比

类型	容量	生命周期	作用域	用途
Cookie	~4KB	可设置	同源+路径	会话、认证
localStorage	~5MB	永久	同源	持久化配置
sessionStorage	~5MB	标签页	同源+标签页	临时状态
IndexedDB	~无限	永久	同源	大量结构化数据

二、localStorage / sessionStorage

// 存储
localStorage.setItem('key', 'value');
localStorage.setItem('user', JSON.stringify({ name: 'Vue' }));

// 读取
const value = localStorage.getItem('key');
const user = JSON.parse(localStorage.getItem('user'));

// 删除
localStorage.removeItem('key');
localStorage.clear();

// 遍历
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

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

三、Cookie

// 设置
document.cookie = 'name=value';
document.cookie = 'name=value; max-age=3600'; // 1小时
document.cookie = 'name=value; path=/; secure; samesite=strict';

// 读取
const cookies = document.cookie; // "name=value; name2=value2"
function getCookie(name) {
  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
  return match ? match[2] : null;
}

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

Cookie 属性

属性	说明
max-age	过期秒数
expires	过期时间
path	路径
domain	域名
secure	仅 HTTPS
httpOnly	禁止 JS 访问
sameSite	跨站限制 (Strict/Lax/None)

四、IndexedDB

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

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // 创建对象存储
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (e) => {
  const db = e.target.result;
  
  // 写入
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Vue' });
  
  // 读取
  const getTx = db.transaction('users', 'readonly');
  const getStore = getTx.objectStore('users');
  const getReq = getStore.get(1);
  getReq.onsuccess = () => console.log(getReq.result);
};

---

面试高频题

Q1: localStorage 和 sessionStorage 区别？

localStorage 永久存储，sessionStorage 随标签页关闭而清除。

Q2: Cookie 的 SameSite 作用？

防止 CSRF 攻击，限制第三方网站携带 Cookie。

Q3: IndexedDB 应用场景？

离线应用、大量数据存储、复杂查询需求。