页面刷新或站内跳转时JS变量UID为何被清空？

问题原因 #

你的代码仅在初始加载带UID参数的页面时，从当前URL的查询参数中读取userID。但当你在站内跳转其他页面时，新页面的URL里并没有携带UID参数，所以urlParams.get('UID')会返回null，导致userID被清空。

解决方案 #

以下是几种常用的解决思路，你可以根据需求选择：

1. 用本地存储持久化userID（推荐）

读取到UID后，将其存入浏览器的localStorage或sessionStorage中，后续页面直接从存储中读取，无需依赖URL参数：

• 初始页面（带UID参数的页面）代码：

// 读取URL参数
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userID = urlParams.get('UID');

// 如果获取到有效UID，存入本地存储
if (userID) {
  // localStorage：持久化存储，关闭浏览器后仍保留
  localStorage.setItem('savedUserID', userID);
  // 若只需会话期间保留，改用sessionStorage：
  // sessionStorage.setItem('savedUserID', userID);
  console.log("userID: " + userID);
}

• 站内其他页面读取代码：

// 从本地存储读取userID
const userID = localStorage.getItem('savedUserID');
// 对应sessionStorage的话：
// const userID = sessionStorage.getItem('savedUserID');
console.log("userID: " + userID);

2. 站内跳转时携带UID参数

如果需要每个页面的URL都保留UID参数，可以在跳转时主动将参数拼接到目标URL上：

• 用HTML标签跳转：

<a href="/target-page?UID=${localStorage.getItem('savedUserID')}">跳转到目标页面</a>

• 用JavaScript跳转：

const userID = localStorage.getItem('savedUserID');
if (userID) {
  window.location.href = `/target-page?UID=${userID}`;
}

注意：这种方式会让URL始终携带UID，若用户手动修改URL参数可能导致数据异常。

3. 用Cookie存储userID

如果需要服务器端也能读取userID，可以用Cookie存储：

• 初始页面设置Cookie：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userID = urlParams.get('UID');

if (userID) {
  // 设置Cookie，path=/确保全站可访问，max-age设置有效期（单位：秒）
  document.cookie = `savedUserID=${userID}; path=/; max-age=86400`;
  console.log("userID: " + userID);
}

• 其他页面读取Cookie：

// 封装读取Cookie的工具函数
function getCookie(name) {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${name}=`);
  if (cookieParts.length === 2) {
    return cookieParts.pop().split(';').shift();
  }
  return null;
}

const userID = getCookie('savedUserID');
console.log("userID: " + userID);

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