如何点击按钮刷新JavaScript变量数据而不刷新网页

要实现点击按钮更新roles.js中的角色变量，核心思路是动态重新加载roles.js脚本并覆盖原有变量，同时避免浏览器缓存旧文件。下面是具体实现步骤：

1. 重构roles.js的变量结构 #

将原来独立的let变量改为挂载到window的全局对象，这样重新加载脚本时可以直接覆盖原有数据：

// roles.js
window.userRoles = {
  hostRole: ["john"],
  adminRole: ["sarah", "amy"],
  modRole: ["megan"]
};

2. 修改主JS文件的变量引用 #

主文件中原来直接使用hostRole、adminRole的地方，改为引用userRoles对象的属性：

// 主JS文件示例
function checkUserRole(username) {
  if (userRoles.hostRole.includes(username)) {
    console.log(`${username} 是主机角色`);
  } else if (userRoles.adminRole.includes(username)) {
    console.log(`${username} 是管理员角色`);
  } else if (userRoles.modRole.includes(username)) {
    console.log(`${username} 是版主角色`);
  }
}

3. 添加HTML刷新按钮及对应逻辑 #

在HTML页面中添加按钮，并编写动态加载脚本的函数：

<!-- HTML页面 -->
<button id="refreshRolesBtn">刷新角色列表</button>

<script>
document.getElementById('refreshRolesBtn').addEventListener('click', function() {
  // 移除旧的roles脚本（如果存在）
  const oldScript = document.querySelector('script[src="roles.js"]');
  if (oldScript) {
    oldScript.remove();
  }

  // 创建新的script标签，添加时间戳参数避免缓存
  const newScript = document.createElement('script');
  newScript.src = `roles.js?t=${Date.now()}`;
  newScript.onload = function() {
    console.log('角色列表已更新');
    // 这里可以添加更新后的回调逻辑，比如重新渲染角色相关UI
  };
  document.body.appendChild(newScript);
});
</script>

关键说明 #

• 时间戳参数：t=${Date.now()}会让浏览器每次请求roles.js时都认为是新文件，避免使用缓存的旧内容。
• 全局对象覆盖：通过window.userRoles挂载变量，重新加载脚本时会直接覆盖该对象，主文件中引用的属性会自动获取最新值。
• 无整页刷新：整个过程只重新加载roles.js，不会刷新整个页面，不影响页面其他状态。

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