通过类构造函数传递的ID为何是动态的？如何不预设实现固定值？

你当前每次刷新页面data-id都会变化的核心原因是，IdChecker类的构造函数每次页面加载时都会通过Math.random()生成新的随机值，没有对已生成的ID做持久化存储。
如果不需要预先设置固定ID，仅需要保证同浏览器同设备下ID静态不变，可以使用浏览器自带的localStorage本地存储能力实现，修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul>
        <li id="item">ID check</li>
    </ul>
</div>
<script>
    class IdChecker {
        constructor() {
            // 优先读取本地存储的已有ID
            const savedId = localStorage.getItem('li_item_data_id')
            if(savedId) {
                this.id = savedId
            } else {
                // 无存储记录则生成新ID并持久化保存
                this.id = Math.round(Math.random() * 10000);
                localStorage.setItem('li_item_data_id', String(this.id))
            }
        }
    }
    let item = document.getElementById('item');
    item.setAttribute('data-id', String(new IdChecker().id))
</script>
</body>
</html>

• 首次加载页面时，本地存储没有对应ID，会生成随机值存入localStorage，同时赋值给data-id
• 后续每次刷新页面，都会优先读取本地存储中已有的ID，不会再生成新的随机值
• 不需要提前预设固定ID，首次生成后就会保持静态不变

该方案仅在当前浏览器的当前站点下生效，如果用户清除浏览器本地存储、切换浏览器或者更换设备，ID会重新生成。如果需要跨设备全局唯一且永久静态的ID，需要将生成的ID存储在服务端，页面加载时从接口请求获取。

内容的提问来源于stack exchange，提问作者Paul