| 📋 六大跟踪技术速览表 | ||
|---|---|---|
| 🍪 Cookie | 小型文本数据 (≤4KB) ，每次请求自动携带 | 持久会话SameSite |
| 🗄️ LocalStorage | 键值对存储，最大约5MB，不随请求发送 | 持久同源 |
| ⏳ SessionStorage | 标签页级别存储，关闭即清除 | 会话标签隔离 |
| 🗃️ IndexedDB | 结构化事务数据库，存储大量数据 (≥250MB) | 持久异步对象存储 |
| 🎨 Canvas Fingerprinting | 利用Canvas API绘制图形，提取GPU/渲染指纹 | 硬件指纹被动 |
| 📱 Device Fingerprinting | 综合设备属性 (屏幕、时区、字体、插件等) 生成唯一ID | 超级cookie跨站追踪 |
HttpOnly / Secure / SameSite 可限制；用于会话管理、个性化、追踪。
无过期时间，可被JS读取；适合存储偏好，但易被用于跨站跟踪。
标签页独立，关闭即消失；无法跨站共享，隐私性相对较好。
存储大量用户数据，包括离线内容；可被枚举，需注意清理。
基于GPU、驱动、抗锯齿等差异生成哈希；不易被用户察觉。
组合数十种属性 (WebGL, Audio, 字体) ，指纹长期稳定。
// 1. Cookie (设置 & 读取)
document.cookie = "track_id=abc123; path=/; max-age=3600; SameSite=Lax";
const cookies = document.cookie;
// 2. LocalStorage (持久)
localStorage.setItem("user_uuid", "f47ac10b-58cc-4372-a567-0e02b2c3d479");
const uuid = localStorage.getItem("user_uuid");
// 3. SessionStorage (标签页级别)
sessionStorage.setItem("session_key", "temp_value");
// 4. IndexedDB (异步, 结构化)
const request = indexedDB.open("trackDB", 1);
request.onsuccess = (e) => {
const db = e.target.result;
const tx = db.transaction("events", "readwrite");
tx.objectStore("events").add({ type: "pageview", ts: Date.now() });
};
// 5. Canvas Fingerprinting (提取指纹)
const canvas = document.createElement("canvas");
canvas.width = 200; canvas.height = 50;
const ctx = canvas.getContext("2d");
ctx.textBaseline = "top";
ctx.font = "14px Arial";
ctx.fillText("Fingerprint 🖼️", 2, 2);
const fingerprint = canvas.toDataURL(); // 哈希后作为标识
// 6. Device Fingerprinting (组合属性)
const fp = {
screen: `${screen.width}x${screen.height}`,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
userAgent: navigator.userAgent,
hardwareConcurrency: navigator.hardwareConcurrency || "unknown"
};