如何在JavaScript中存储当前URL到Cookie并在其他页面校验后跳转回该URL

我来帮你梳理下代码里的问题，你的实现思路是对的，但几个细节没处理好导致Cookie没正常工作，咱们一步步修正：

问题分析 #

你的代码里有三个关键问题：

• 条件判断错误：你用了=赋值运算符而不是===比较运算符，这会把'data'直接赋值给queryString，导致条件永远为真，而且根本没正确判断URL里的查询字符串。
• Cookie格式不规范：直接把window.location.href赋值给document.cookie不符合Cookie的键值对格式，而且没有指定path等属性，默认Cookie只能在当前路径访问，跳转后页面可能读不到。
• Cookie读取方式错误：document.cookie返回的是所有Cookie拼接的字符串，不能直接拿到你存储的URL，需要解析出对应键的值。

修正后的完整实现 #

第一步：在含特定查询字符串的页面存储Cookie #

// 解析URL的查询参数
const urlParams = new URLSearchParams(window.location.search);
// 判断是否存在特定查询字符串（这里假设你要检测的是key为data的参数）
if (urlParams.has('data')) {
  // 设置Cookie：指定键名、值、生效路径和过期时间
  const expires = new Date();
  expires.setTime(expires.getTime() + (30 * 60 * 1000)); // 设置30分钟过期
  document.cookie = `redirectUrl=${encodeURIComponent(window.location.href)}; path=/; expires=${expires.toUTCString()}`;
  
  // 可选：验证存储结果
  console.log('Cookie已存储:', document.cookie);
}

第二步：登录后的页面检查Cookie并跳转 #

// 封装解析Cookie的工具函数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
}

// 获取存储的跳转URL
const redirectUrl = getCookie('redirectUrl');
if (redirectUrl) {
  // 跳转前清除Cookie，避免重复跳转
  document.cookie = 'redirectUrl=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC';
  // 跳转回之前的页面
  window.location.href = redirectUrl;
}

关键细节说明 #

• 使用URLSearchParams是现代浏览器推荐的查询参数解析方式，比手动拆分字符串更可靠。
• encodeURIComponent和decodeURIComponent用来处理URL里的特殊字符，避免Cookie存储和解析出错。
• 指定path=/确保Cookie在整个站点的页面都能访问到，否则默认只在当前路径生效。
• 设置过期时间可以避免Cookie永久存储，也可以不设置expires，让Cookie成为会话Cookie（关闭浏览器就失效）。

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