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` 库并将其集成到项目的工具函数中来实现。具体做法如下：

#### 安装 uuid 库
首先，在项目根目录下安装 `uuid` 包，可以通过 npm 或 yarn 来完成。

npm install uuid

或者

yarn add uuid

#### 创建工具函数文件
接着，在 `src/utils/` 目录下新建一个名为 `uuid_token.js` 的文件用于定义获取 UUID 的逻辑[^4]。

该文件的内容可以参照以下代码片段编写：

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

function getUUID(){
    // 尝试从本地存储读取已存在的 UUID
    let uuid_token = localStorage.getItem("UUIDTOKEN");
    
    // 若不存在则新生成一个，并保存至浏览器的本地存储中
    if (!uuid_token){
        uuid_token = uuidv4();
        localStorage.setItem("UUIDTOKEN", uuid_token);
    }
    
    return uuid_token;
}

export default getUUID;

此段代码确保了即使刷新页面也能保持相同的 UUID 值不变，因为一旦生成就会被存入 `localStorage` 中[^2]。

#### 使用自定义钩子或组合式 API 导入 UUID 函数
最后一步是在任何需要的地方导入这个方法。比如在一个组件内部使用 Composition API 方式调用它:

<script setup>
import getUUID from '@/utils/uuid_token';
const uniqueId = getUUID(); // 获取唯一的 ID
</script>

<template>
  <div>{{uniqueId}}</div> <!-- 显示用户的唯一标识 -->
</template>

这样就完成了在整个 Vue 3 应用程序内按需生成和管理全局唯一识别码的功能设置[^1]。

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` 属性显示出来。