function getUuid() { let uuid = '' try { uuid = localStorage.getItem(UUID_KEY) } catch (e) { uuid = UUID_VALUE } if (!uuid) { uuid = Date.now() + '' + Math.floor(Math.random() * 1e7) try { localStorage.setItem(UUID_KEY, uuid) } catch (e) { localStorage.setItem(UUID_KEY, UUID_VALUE) } } return uuid }

这是一个 JavaScript 函数，它用于生成一个唯一标识符(UUID)。它首先尝试从 localStorage 中获取一个 UUID，如果没有获取到，则生成一个新的 UUID，并将其存储在 localStorage 中，以便下次使用时可以直接获取。如果存储时出现错误，则将 UUID 存储在一个常量中，以便下次使用时可以直接使用。最后，函数返回生成或获取到的 UUID。

相关问题

vue3生成uuid

### 实现 UUID 的生成

在 Vue 3 项目中，可以利用 `uuid` 库来方便地生成全局唯一的标识符（UUID）。安装该库可以通过 npm、yarn 或者 pnpm 完成[^3]。

#### 安装依赖包

npm install uuid
# 或者使用 yarn
yarn add uuid
# 或者使用 pnpm
pnpm add uuid

#### 导入并使用 UUID 函数
为了简化项目的开发流程以及提高代码的可维护性和复用率，在实际应用中通常会将 UUID 生成功能封装为工具函数。下面是一个基于单例模式的例子，它不仅能够确保每次调用都返回相同的 ID （对于同一实例），而且还能保证这个 ID 是持久化的——即使页面刷新也不会丢失：

// src/utils/getUUID.js
import { v4 as uuidv4 } from 'uuid';

function getUUID(){
    let uuid_token = localStorage.getItem("UUIDTOKEN");
    
    if (!uuid_token){
        uuid_token = uuidv4();
        localStorage.setItem("UUIDTOKEN", uuid_token);
    }
    
    return uuid_token;
}

export default getUUID;

此方法首先尝试从浏览器的本地存储中读取已存在的 UUID；如果没有找到，则新创建一个，并将其保存到本地以便后续访问时可以直接取出而不必重新计算[^2]。

另外一种情况是希望生成带有特定前缀或者满足某些条件的 UUID，比如以字母开头的情况:

// src/utils/generateLetterPrefixedId.js
import { v4 as uuid4 } from 'uuid';

function generateLetterPrefixedId() {
    let id = '';
    do {
        // 取得新的 UUID 并截取前面部分转换成大写形式
        id = uuid4().substring(0, 8).toUpperCase();
        
        // 检查首字符是否为字母，如果不是则重复上述过程直到符合条件为止
    } while (!/^[a-zA-Z]/.test(id));
    
    return id;
}

这段逻辑通过正则表达式验证所得到的结果是否符合预期格式，如果不匹配就再次尝试生成直至获得合适的值。

最后还有一种场景是在数据发生变更的情况下才更新对应的唯一标识。此时可以在组件内部定义一个 watch 监听器用于监测目标属性的变化状态，一旦检测到变化即刻触发相应处理程序去修改关联的 UUID 字段[^4]:

<script setup>
import { ref, watchEffect } from 'vue';
import { v4 as uuidv4 } from 'uuid';

const formData = reactive({
    name: '',
    email: ''
});

let uniqueIdentifier = ref('');

watchEffect(() => {
    const dataString = JSON.stringify(formData);
    uniqueIdentifier.value = calculateHash(dataString); // 这里的calculateHash应该被替换为你自己的哈希算法或者是简单的uuidv4()
});
</script>

<template>
<div>
    <!-- 表单项 -->
    <input type="text" v-model="formData.name">
    <input type="email" v-model="formData.email">

    <!-- 显示当前表单对应的数据指纹 -->
    <p>Unique Identifier: {{ uniqueIdentifier }}</p>
</div>
</template>

在这个例子中，每当 `formData` 对象中的任何一个键值对发生了更改之后都会自动触发一次新的 UUID 计算操作，并把最新的结果赋给 `uniqueIdentifier` 属性显示出来。

vue随机生成uuid

### 实现 Vue 项目中的 UUID 随机生成

#### 方法一：基于时间戳的 UUID (UUID v1)

在 Vue 组件中可以按照如下方式集成并使用 `uuid` 库来生成基于时间戳的唯一标识符：

// main.js 或 setup 文件中全局注册
import { v1 as uuidv1 } from 'uuid';

export default {
    data() {
        return {
            uuid: ""
        };
    },
    created() {
        this.uuid = uuidv1(); // 获取随机ID
    }
}

此方法会在组件实例化时自动调用 `created()` 生命周期钩子函数，从而为每个新创建的对象分配唯一的 ID[^1]。

#### 方法二：完全随机的 UUID (UUID v4)

对于需要更安全、不可预测性的场景，则推荐采用版本 4 的 UUID 方案，在首次访问页面时即刻生成，并将其保存至浏览器本地存储以便后续重访时继续沿用同一标识：

// 定义工具函数用于获取或设置UUID
export const getUUID = () => {
    let uuid_token = localStorage.getItem('UUIDTOKEN');
    
    if (!uuid_token) {
        uuid_token = require('uuid').v4();
        localStorage.setItem('UUIDTOKEN', uuid_token);
    }

    return uuid_token;
};

通过这种方式不仅能够保证每次刷新页面都能得到相同的用户识别码（针对同一位访客），而且还能有效防止因频繁请求而产生的重复计算开销[^2]。