如何在JavaScript中修改外部JS变量并实现多HTML页面共享取值

每个独立HTML页面运行在完全隔离的JavaScript上下文环境中。你在第一个页面中修改buttons.js定义的变量时，修改的只是当前页面内存中加载的JS实例的变量值，并不会改动服务器上的buttons.js源文件。第二个页面打开时会重新请求并加载原始的buttons.js文件，因此读取到的还是初始化的0值。

以下方案均要求两个HTML页面部署在同一域名下：

• 方案1：使用localStorage持久化存储修改后的值（推荐，跨标签页/窗口永久生效，除非用户手动清除浏览器缓存）

  1. 改造buttons.js的初始化逻辑，优先读取本地存储的修改值，不存在时用默认值0：

  // buttons.js 核心代码
  let fifc = localStorage.getItem('saved_fifc') ? Number(localStorage.getItem('saved_fifc')) : 0
  

  2. 在第一个页面修改fifc的逻辑中，同步写入本地存储：

  fifc = 4895239
  localStorage.setItem('saved_fifc', fifc)
  

  第二个页面加载时buttons.js会自动读取最新存储的值，无需额外修改读取逻辑。

• 方案2：使用sessionStorage存储（适合仅同标签页跳转的场景，关闭标签页后数据自动清除）
  用法和localStorage完全一致，仅需将代码中的localStorage替换为sessionStorage即可，缺点是无法在不同标签页之间共享数据。

• 方案3：使用Cookie存储（适合需要把变量值同步传给后端的场景）
  缺点是存储容量上限仅4KB，且每次站点请求都会自动携带Cookie内容到服务端，会增加不必要的请求体积。

  1. 改造buttons.js的初始化逻辑：

  // 读取Cookie工具函数
  function getCookie(name) {
    const value = `; ${document.cookie}`
    const parts = value.split(`; ${name}=`)
    if (parts.length === 2) return Number(parts.pop().split(';').shift())
    return 0
  }
  let fifc = getCookie('saved_fifc')
  

  2. 第一个页面修改值时同步写入Cookie：

  fifc = 4895239
  // 示例设置Cookie有效期为1天，同域名全路径生效
  document.cookie = `saved_fifc=${fifc}; path=/; max-age=86400`
  

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