从 Chome92 版本开始,crypto 模块已经支持randomUUID() 方法了。
从 Chome92 版本开始,crypto 模块已经支持randomUUID()
方法了。
1. 以前的方式
在前端 web 中,我们在生成 uuid 时,通常都会使用时间戳或 Math.random()。例如在 stackoverflow 上,有段很出名的代码:How to create a GUID / UUID,就是Math.random()
来生成的:
COPYJAVASCRIPT
function uuidv4() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8; return v.toString(16); }); } console.log(uuidv4()); // "f94adc58-89b7-4c70-bc92-2935ea6fb5d2" 格式一样,但每次都不一样
每个位置都调用一次 random()方法。
2. randomUUID
现在,Chrome 从 92 版本开始,已经原生支持 uuId 方法了,即crypto.randomUUID()
。
COPYJAVASCRIPT
crypto.randomUUID();
以后想获取一个随机值,或者用来标识设备(要求不高的前提下)的时候,就可以用这个randomUUID()
方法。
3. 总结
randomUUID()这个浏览器提供的原生确实很好用,而且符合 v4 版本的格式。
但就是有一个缺点:兼容性太差。不止其他浏览器不支持,即使在 Chrome 浏览器,也只有从 92 版本开始,才能使用。
不过相信不久的将来,其他浏览器也会支持这个方法的。
我们来写一个前端获取uuid的方法。
优先使用crypto.randomUUID;
没有的话,使用优先使用crypto.getRandomValues;
使用Math.random()进行兜底;
COPYJAVASCRIPT
const generateUUID = () => { if (typeof crypto === 'object') { if (typeof crypto.randomUUID === 'function') { // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID return crypto.randomUUID(); } if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') { // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid const callback = (c) => { const num = Number(c); return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16); }; return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback); } } let timestamp = new Date().getTime(); let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { let random = Math.random() * 16; if (timestamp > 0) { random = (timestamp + random) % 16 | 0; timestamp = Math.floor(timestamp / 16); } else { random = (perforNow + random) % 16 | 0; perforNow = Math.floor(perforNow / 16); } return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16); }); };