Vue使用uuid-npm快速生成uuid,适用于多种场景
最近项目中需要记录访客的 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,大家可以根据自己的需求灵活运用。
声明:本文由w3h5原创,转载请注明出处:《Vue使用uuid-npm快速生成uuid,适用于多种场景》 https://www.w3h5.com/post/544.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 利用Hexo打造属于自己的网页版简历
- RCE远程控制Windows服务器——以win10虚拟机为例
- 解决InnoDB: Table mysql/innodb_index_stats has length mismatch
- R语言中对文本数据进行主题模型topic modeling分析
- QT学习第3天:QSlider使用方法
- qt学习第2天:QRadioButtonTest+ButtonGroup单选后提示消息,QComBox
- Python使用矩阵分解法找到类似的音乐
- SpringBoot集成ELK实现日志收集实践
- python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- R语言:用R语言填补缺失的数据
- R语言如何和何时使用glmnet岭回归
- r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- cmd里如何查看历史命令并执行
- akka-typed(10) - event-sourcing, CQRS实战
- 【每日一题】37. Sudoku Solver