从URL参数存储Cookie并取值赋值到输入框问题排查及优化咨询

核心错误点 #

• 缺少getCookie函数：retrieveReferrer函数调用了getCookie但从未定义该函数，导致无法读取Cookie值，函数自然无法正常工作。
• DOM元素可能未加载完成：如果retrieveReferrer在页面DOM渲染前执行，document.querySelector会返回null，后续赋值操作直接失效。
• 冗余操作：输入框（input元素）的内容由value属性控制，设置innerHTML属于无效操作，完全没必要。

修正后的代码实现 #

// 读取Cookie的工具函数
function getCookie(cName) {
  const name = cName + "=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArray = decodedCookie.split(';');
  for(let i = 0; i < cookieArray.length; i++) {
    let cookie = cookieArray[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return "";
}

// 设置Cookie的函数
function setCookie(cName, cValue, expDays) {
  const date = new Date();
  date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${cName}=${cValue}; ${expires}; path=/`;
}

// 处理URL参数并设置Cookie
const queryString = window.location.search;
if(queryString) {
  const urlParams = new URLSearchParams(queryString);
  const referrerID = urlParams.get('referrer');
  if(referrerID) { // 确保参数存在再设置Cookie
    setCookie('referrerID', referrerID, 1);
  }
}

// 读取Cookie并设置到输入框
function retrieveReferrer() {
  const storedReferrer = getCookie("referrerID");
  if(!storedReferrer) return; // 无值时直接返回
  const inputElem = document.querySelector(".booking-referrer .el-input__inner");
  if(inputElem) { // 确保找到元素再赋值
    inputElem.value = storedReferrer;
    console.log(storedReferrer);
  }
}

// 确保DOM加载完成后执行函数
document.addEventListener('DOMContentLoaded', retrieveReferrer);

更简洁规范的优化建议 #

1. 使用现代语法：统一用const/let替代var，模板字符串拼接更清晰易读。
2. 增加边界判断：检查参数、Cookie值、DOM元素是否存在，避免无意义的报错。
3. 合并逻辑（可选）：如果不需要单独调用retrieveReferrer，可以直接在DOM加载完成后一次性处理所有逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 简化版读取Cookie函数
  const getCookie = (name) => document.cookie.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1] || '';
  
  // 处理URL参数并设置Cookie
  const referrerParam = new URLSearchParams(window.location.search).get('referrer');
  if(referrerParam) {
    document.cookie = `referrerID=${referrerParam}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=/`;
  }
  
  // 将Cookie值设置到输入框
  const inputElem = document.querySelector(".booking-referrer .el-input__inner");
  if(inputElem) {
    inputElem.value = getCookie('referrerID');
  }
});

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