目标

H5用户在未登录前，经常也需要记录游客身份，便于记录用户操作习惯，给用户推荐相关产品。H5项目是运行在浏览器环境的，浏览器没有提供相关设备ID的信息。很多项目会随机生成一个UUID，并持久化存储在localStorage，但是localStorage也有被清除的风险，就需要一个不会变也不会被清掉的值作为游客身份的唯一标识。

方案

fingerprintjs

原理

通过浏览器canvas绘画出一张指定的图，将绘画出来的图片转为base64格式，然后再将base64内容通过指定编码方式转化为fingerprintID。因为不同浏览器，由于浏览器api、版本、系统等原因，绘画出来的图片会存在非常细微的差异，人眼很难辨别，所以转换出来的base64会不一样。

安装fingerprintjs

npm i @fingerprintjs/fingerprintjs -S

使用

import FingerprintJS from "@fingerprintjs/fingerprintjs";const getFingerPrintID = async () => {const fpPromise = await FingerprintJS.load();const result = await fpPromise.get();return result.visitorId;
}const id = await getFingerPrintID();
console.log(id)

生成32位字符串