如何在不同HTML页面的two.js中调用first.js的变量？

方法1：用localStorage做持久化存储 #

• 逻辑：localStorage是浏览器提供的持久化存储容器，同域名下的页面都能访问，数据会一直保留直到主动删除。
• 操作步骤：
  1. 在first.js里把要共享的变量存进去：

     // first.js（对应第一个页面）
     const mySharedVar = "来自first.js的内容";
     // 复杂类型（对象、数组）要转成JSON字符串，简单字符串可直接存
     localStorage.setItem("savedData", JSON.stringify(mySharedVar));
     

  2. 在two.js里读取存储的内容：

     // two.js（对应第二个页面）
     const getSharedVar = JSON.parse(localStorage.getItem("savedData"));
     console.log(getSharedVar); // 输出：来自first.js的内容
     

方法2：用sessionStorage做会话级临时存储 #

• 逻辑：和localStorage用法几乎一样，但数据只在当前浏览器会话有效，关闭标签页或浏览器后自动清除，适合临时传值。
• 操作步骤：
  1. first.js存入数据：

     // first.js
     const tempData = { id: 123, status: "active" };
     sessionStorage.setItem("tempSaved", JSON.stringify(tempData));
     

  2. two.js读取数据：

     // two.js
     const getTempData = JSON.parse(sessionStorage.getItem("tempSaved"));
     console.log(getTempData.id); // 输出：123
     

方法3：跳转时通过URL参数传递 #

• 逻辑：如果是从第一个页面跳转到第二个页面，可以把变量拼到URL参数里，two.js从URL里解析出来。
• 操作步骤：
  1. first.js里触发跳转并拼接参数：

     // first.js
     const jumpVar = "跳转时带过来的变量";
     // 对参数编码避免特殊字符乱码
     const encodedVar = encodeURIComponent(jumpVar);
     window.location.href = `second.html?share=${encodedVar}`;
     

  2. two.js里解析URL参数：

     // two.js
     const urlParams = new URLSearchParams(window.location.search);
     const getJumpVar = decodeURIComponent(urlParams.get("share"));
     console.log(getJumpVar); // 输出：跳转时带过来的变量
     

• 注意：这种方式只适合少量简单数据，敏感数据别用，因为参数会暴露在URL里。

方法4：用Cookie传递小数据 #

• 逻辑：Cookie是浏览器存储的小数据片段，可设置有效期，同域名页面都能访问，适合存极小量数据。
• 操作步骤：
  1. first.js设置Cookie：

     // first.js
     const cookieData = "Cookie里的内容";
     // 设置路径为根目录，让所有页面都能访问
     document.cookie = `sharedCookie=${encodeURIComponent(cookieData)}; path=/`;
     

  2. two.js读取Cookie：

     // two.js
     function getCookie(cookieName) {
         const cookieStr = `; ${document.cookie}`;
         const cookieParts = cookieStr.split(`; ${cookieName}=`);
         if (cookieParts.length === 2) return decodeURIComponent(cookieParts.pop().split(';').shift());
     }
     const getCookieData = getCookie("sharedCookie");
     console.log(getCookieData); // 输出：Cookie里的内容
     

• 注意：Cookie单条大小限制约4KB，不适合存大内容。

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