前端资源网 - w3h5最近项目中需要记录访客的 UUID 以实现用户存留、日活、月活等用户画像。
首先，什么是 UUID ？
UUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。
RFC 4122第3节提供UUID字符串表示形式的定义。UUID 是由一组32位数的16进制数字所构成，是故 UUID 理论上的总数为1632=2128，约等于3.4 x 10123。
也就是说若每纳秒产生1百万个 UUID，要花100亿年才会将所有 UUID 用完
格式：
UUID 的十六个八位字节被表示为 32个十六进制数字，以连字号分隔的五组来显示，形式为 8-4-4-4-12，总共有 36个字符（即三十二个英数字母和四个连字号）。例如：
123e4567-e89b-12d3-a456-426655440000 xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
数字 M 的四位表示 UUID 版本，当前规范有5个版本，M可选值为1, 2, 3, 4, 5 ；
数字 N 的一至四个最高有效位表示 UUID 变体( variant )，有固定的两位10xx因此只可能取值8, 9, a, b；
UUID版本通过 M 表示，当前规范有5个版本，可选值为1, 2, 3, 4, 5。这5个版本使用不同算法，利用不同的信息来产生 UUID，各版本有各自优势，适用于不同情景。具体使用的信息
UUID - npm
Vue 、React 等可以直接通过 npm 安装并使用 uuid。
用于创建RFC4122 UUID。
完整 -支持RFC4122版本1、3、4和5 UUID。
1、安装：
npm install uuid
2、生成一个 UUID ：
import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'3、使用 CommonJS 语法：
const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'API摘要 具体的API，可以去 npm 的详情页面查看。
uuid.NIL | nil UUID字符串（全零） | 新进 [email protected] |
uuid.parse() | 将UUID字符串转换为字节数组 | 新进 [email protected] |
uuid.stringify() | 将字节数组转换为UUID字符串 | 新进 [email protected] |
uuid.v1() | 创建版本1（时间戳）UUID | |
uuid.v3() | 创建版本3（带MD5的命名空间）UUID | |
uuid.v4() | 创建版本4（随机）UUID | |
uuid.v5() | 创建版本5（带SHA-1的命名空间）UUID | |
uuid.validate() | 测试字符串以查看它是否为有效的UUID | 新进 [email protected] |
uuid.version() | 检测UUID的RFC版本 | 新进 [email protected] |
应用场景：
我们可以根据需求，来满足不用的应用场景，比如：
页面刷新即生成一个新的 UUID ：
uuid.v4() //直接加在页面的任意位置
打开页面/标签，即生成一个 UUID ，页面刷新 UUID 不会变。
打开页面，如果没有 UUID 则生成一个存入 sessionStorage ，如果有则直接读取 sessionStorage 中保存的 UUID 。
let uuid = sessionStorage.getItem('uuid');
if (!uuid) {
sessionStorage.setItem('uuid',uuidv4());
}UUID 长期保存，清缓存后自动生成：
这样我们可以将 uuid 存入 localStorage 中，可以长期保存：
let uuid = localStorage.getItem('uuid');
if (!uuid) {
localStorage.setItem('uuid',uuidv4());
}增加登录验证，未登陆状态再生成 UUID：
if (getToken()){//判断是否有 token
sessionStorage.removeItem('uuid'); //如果有，清除 sessionStorage 中的 uuid
} else {//未登录状态生成 uuid
let uuid = sessionStorage.getItem('uuid');
if (!uuid) {
sessionStorage.setItem('uuid',uuidv4());
}
}当然，也可以根据时间、设备信息、MD5和加盐（Salt）等方式生成更加精确的 UUID，大家可以根据自己的需求灵活运用。