How to Create a UUID in JavaScript
The UUID identifier has been used in programming since the days a baby-faced David Walsh became a professional software engineer. My first exposure to UUIDs was via a ColdFusion app I inherited and ... the less we say about that the better. In any event, I was recently surprised to see that JavaScript has the ability to create UUIDs.
Developers can use the native JavaScript crypto library to generate a UUID:
crypto.randomUUID() // '5872aded-d613-410e-841f-a681a6aa8d8b'
crypto.randomUUID() // 'fe6c7438-a833-4c7c-9ea3-cdc84ef41dfc'
crypto.randomUUID() // 'e47a03d4-5da3-4451-a2c1-265de99cc2c1'
crypto.randomUUID() // '04cdadeb-0228-43db-85dc-ce7e960a6cde'
It's important to remember that the UUID is not guaranteed to be unique, though the probability of repetition is incredibly low. I look forward to exploring the window.crypto API further to see what other cool things we can do!
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Fullscreen API]()
As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
Unfortunately, browser support is very patchy so far…
Plenty of shims/polyills are available.
From https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
if (! (crypto.randomUUID instanceof Function)) { crypto.randomUUID = function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }V8 is not equal to JavaScript
Yes, the article should have included ‘node’ or ‘v8’ in the title.
Probably worth mentioning this doesn’t work in Safari or Firefox and is not a W3C Standard nor is it on the W3C Standards Track.
Are there any other libraries that generate uuid other than crypto in js?
https://github.com/uuidjs/uuid
the uuid library
https://www.npmjs.com/package/uuid
A note on browser support would be useful ;) But it‘s great to see that we can soon use it just like that.
Chromium (including Edge): >=92
Firefox: >=95 (Release notes how I discovered the API)
Safari: :(
IE: No!
shim:
if (! (crypto.randomUUID instanceof Function)) { function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }Turns out I cannot edit comments…
if (! (crypto.randomUUID instanceof Function)) { crypto.randomUUID = function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } }