页面加载时代理编码未逐次加1而是随机取值如何解决

现有代码可生成尾号为随机值的代理编码，但预期效果为：页面每次加载时，该编码值自动递增1，最终生成的编码展示在页面对应元素中。目前代码运行不符合预期：页面加载时生成的编码不会按规则逐次加1，而是随机选取任意值。

JavaScript 逻辑 #

function agentId() {
  var d = new Date().getTime();
  var acode = 'GA000444x'.replace(/[xy]/g, function(c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  document.getElementById('acode').innerHTML = acode;
}

window.onload = function() {
  agentId();
};

HTML 结构 #

<div class="col-sm-3">
  <label for="acode">Agent Code:</label>
  <button type="button" id="acode"></button>
</div>

原有代码的编码生成逻辑完全基于时间戳+随机数计算随机后缀，既没有持久化存储上一次生成的编码值，也没有实现数值递增的逻辑，页面刷新后内存数据释放，根本无法记录上一次的编码值，因此每次加载都会生成随机结果。

要实现跨页面加载的编码递增效果，核心是把上一次生成的编码持久化存储在本地，这里用浏览器自带的localStorage实现即可，逻辑如下：

• 页面加载时先从本地存储读取上次保存的代理编码，首次访问无历史值时从初始值GA0004440开始计数
• 提取编码末尾的数字部分做加1计算，再和固定前缀拼接成新编码
• 把新生成的编码存回本地存储，同时渲染到页面对应元素上

原有HTML结构不需要调整，替换后的JS代码如下：

function agentId() {
  const codePrefix = 'GA000444';
  const storageKey = 'last_agent_acode';
  const lastAcode = localStorage.getItem(storageKey);
  let currentNum;

  // 首次访问无历史记录时从0开始计数
  if (!lastAcode) {
    currentNum = 0;
  } else {
    // 截取数字部分转成整数做递增
    currentNum = parseInt(lastAcode.slice(codePrefix.length), 10) + 1;
  }

  const newAcode = codePrefix + currentNum;
  // 保存新编码供下次加载使用
  localStorage.setItem(storageKey, newAcode);
  // 渲染到页面按钮
  document.getElementById('acode').textContent = newAcode;
}

window.onload = agentId;

如果需要重置编码序列，清空对应站点的本地存储缓存即可重新从0开始生成。

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