怎么通过HTML5中LocalStorage实现基于浏览器指纹的本地匿名标识存储-H5教程-PHP中文网

localstorage 本身不生成浏览器指纹，仅存储前端计算出的匿名设备标识；该标识由 useragent、屏幕分辨率、时区、语言与平台等稳定特征拼接后哈希生成，用于 a/b 测试等轻量级去重场景。

怎么通过html5中localstorage实现基于浏览器指纹的本地匿名标识存储

LocalStorage 本身不能生成浏览器指纹，它只是存储工具；真正的“基于浏览器指纹的本地匿名标识”需要先计算指纹，再用 LocalStorage 保存该标识——整个过程不依赖服务端、不收集个人身份信息，仅用于前端轻量级用户区分（如 A/B 测试、行为统计去重）。

什么是浏览器指纹？

浏览器指纹是通过读取浏览器公开暴露的环境特征（如 UserAgent、屏幕分辨率、时区、字体列表、WebGL 渲染器、Canvas 哈希等）组合生成的一串高区分度字符串。这些信息无需用户授权，且多数情况下同一设备+浏览器下稳定不变。

注意：指纹不是绝对唯一，但对普通网站访问场景已具备足够区分能力；也不等同于“追踪”，关键在是否关联身份、是否跨站共享、是否可撤销。

如何生成一个轻量可用的指纹

避免过度采集（如 AudioContext 或电池 API 已被主流浏览器限制），推荐使用稳定、兼容性好、无隐私风险的特征：

UserAgent（基础 UA 字符串，含浏览器类型、版本、OS）
Screen resolution + color depth（screen.width × screen.height × screen.colorDepth）
Timezone offset（new Date().getTimezoneOffset()）
Language & platform（navigator.language + navigator.platform）
Available fonts（可选）：用 Canvas 绘制隐藏文本并读取像素哈希（需注意部分浏览器屏蔽，建议作为增强项而非必选）

将上述字段拼接后做一次 SHA-256（前端可用 js-sha256）或更简单的 MurmurHash3（更快、够用），输出固定长度哈希值，即为本次会话的“匿名设备标识”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用 LocalStorage 存储并复用该标识

生成后优先检查 LocalStorage 中是否已有有效标识；若无，则生成并存入；后续访问直接读取复用，确保同一浏览器中标识长期一致（除非用户手动清除）：

// 示例：简化版指纹生成 + LocalStorage 持久化
function getFingerprint() {
  const ua = navigator.userAgent;
  const res = `${screen.width}x${screen.height}-${screen.colorDepth}`;
  const tz = new Date().getTimezoneOffset();
  const lang = navigator.language || navigator.userLanguage;
  const plat = navigator.platform;

  return [ua, res, tz, lang, plat].join('||');
}

function getOrCreateDeviceId() {
  let id = localStorage.getItem('anon_device_id');
  if (!id) {
    const fp = getFingerprint();
    // 使用快速非密码学哈希（如 murmur3 或简单 base64 编码+截断）
    id = btoa(fp).substring(0, 16); // 示例：简易哈希，生产建议用 murmur3
    localStorage.setItem('anon_device_id', id);
  }
  return id;
}

console.log('Device ID:', getOrCreateDeviceId());

⚠️ 注意事项：