本地存储与Cookie

Web存储API提供了多种客户端数据存储方案，各有适用场景。

localStorage

基本操作

// 存储数据
localStorage.setItem('name', '张三');
localStorage.setItem('age', '25');

// 直接赋值
localStorage.name = '张三';

// 读取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

// 或直接访问
localStorage.name;

// 删除数据
localStorage.removeItem('name');

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

存储对象

// 存储对象需序列化
const user = { id: 1, name: '张三' };
localStorage.setItem('user', JSON.stringify(user));

// 读取需反序列化
const user = JSON.parse(localStorage.getItem('user'));

// 判断是否存在
if (localStorage.getItem('user')) {
    const data = JSON.parse(localStorage.getItem('user'));
}

存储事件

// 监听存储变化（跨页面）
window.addEventListener('storage', (e) => {
    console.log(e.key);       // 变化的键
    console.log(e.oldValue);  // 旧值
    console.log(e.newValue);  // 新值
    console.log(e.url);       // 来源页面
});

sessionStorage

基本操作

// API与localStorage相同
sessionStorage.setItem('token', 'abc123');
sessionStorage.getItem('token');
sessionStorage.removeItem('token');
sessionStorage.clear();

使用场景

// 临时数据：表单数据临时保存
sessionStorage.setItem('formData', JSON.stringify(formData));

// 页面刷新恢复数据
const saved = sessionStorage.getItem('formData');
if (saved) {
    formData = JSON.parse(saved);
}

// 关闭标签页后自动清除

localStorage vs sessionStorage

Cookie

基本设置

// 简单设置
document.cookie = 'name=张三';

// 设置过期时间
document.cookie = 'name=张三; expires=Fri, 31 Dec 2024 23:59:59 GMT';

// 设置天数过期
const date = new Date();
date.setDate(date.getDate() + 7);
document.cookie = `name=张三; expires=${date.toUTCString()}`;

// 设置路径
document.cookie = 'name=张三; path=/';

// 设置域名
document.cookie = 'name=张三; domain=example.com';

安全属性

// HttpOnly（只能服务器设置，JS无法读取）
// document.cookie = 'token=abc; HttpOnly'; // 无效

// Secure（仅HTTPS传输）
document.cookie = 'token=abc; Secure';

// SameSite（跨站限制）
document.cookie = 'token=abc; SameSite=Strict';  // 完全禁止跨站
document.cookie = 'token=abc; SameSite=Lax';     // 部分允许
document.cookie = 'token=abc; SameSite=None';    // 允许跨站（需配合Secure）

读取Cookie

// 读取所有Cookie（字符串）
console.log(document.cookie);  // 'name=张三; age=25'

// 解析特定Cookie
function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [key, value] = cookie.trim().split('=');
        if (key === name) return value;
    }
    return null;
}

const name = getCookie('name');

删除Cookie

// 设置过期时间为过去
document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

三种存储对比

IndexedDB简介

大量数据存储

// IndexedDB用于大量结构化数据
const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = (e) => {
    const db = e.target.result;
    db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (e) => {
    const db = e.target.result;
    const tx = db.transaction('users', 'readwrite');
    const store = tx.objectStore('users');
    store.add({ id: 1, name: '张三' });
};

IndexedDB容量更大（可达数百MB），适合复杂应用。

实际应用示例

记住用户偏好

// 保存主题设置
function setTheme(theme) {
    localStorage.setItem('theme', theme);
    applyTheme(theme);
}

// 页面加载时恢复
const savedTheme = localStorage.getItem('theme') || 'light';
applyTheme(savedTheme);

登录状态管理

// 登录成功保存token
localStorage.setItem('token', response.token);
localStorage.setItem('user', JSON.stringify(response.user));

// 退出登录清除
localStorage.removeItem('token');
localStorage.removeItem('user');

// 检查登录状态
function isLoggedIn() {
    return localStorage.getItem('token') !== null;
}

要点总结

1. localStorage持久：适合用户偏好、长期数据
2. sessionStorage临时：适合表单数据、会话状态
3. Cookie请求携带：适合身份认证、服务器交互
4. 序列化存储：对象需JSON.stringify/parse
5. IndexedDB大量：适合复杂数据、离线应用