正文

掌握JavaScript获取上一个页面URL参数的技巧

/0 浏览量
0714

在开发过程中，我们经常会需要获取上一个页面的URL参数。JavaScript为我们提供了多种方式来实现这一功能，下面我将详细介绍几种常用的方法。

方法一：使用 history 对象

history 对象提供了与浏览器历史记录相关的功能，其中包括获取当前URL和前一个URL。要获取上一个页面的URL参数，可以使用以下步骤：

  1. 使用 history.back() 跳转到上一个页面。
  2. 使用 window.location.search 获取URL中的查询字符串。
  3. 解析查询字符串，提取所需参数。
// 跳转到上一个页面
history.back();

// 获取查询字符串
var queryString = window.location.search;

// 解析查询字符串
var params = {};
var regex = /([^&=]+)=?([^&]*)/g;
while (regex.exec(queryString) !== null) {
    var name = decodeURIComponent(RegExp.$1);
    var value = decodeURIComponent(RegExp.$2);
    params[name] = value;
}

console.log(params); // 输出参数对象

方法二：使用 performance 对象

performance 对象提供了有关页面加载和浏览器的性能信息。使用 navigation 属性可以获取当前页面的历史记录信息，从而获取上一个页面的URL。

// 获取上一个页面的URL
var previousUrl = performance.navigation.type === 1 ? performance.navigation.preload ? performance.navigation.preloadURL : performance.navigation.history[1] : '';

// 获取查询字符串
var queryString = previousUrl.includes('?') ? previousUrl.split('?')[1] : '';

// 解析查询字符串
var params = {};
var regex = /([^&=]+)=?([^&]*)/g;
while (regex.exec(queryString) !== null) {
    var name = decodeURIComponent(RegExp.$1);
    var value = decodeURIComponent(RegExp.$2);
    params[name] = value;
}

console.log(params); // 输出参数对象

方法三：使用 sessionStorage 和 localStorage

如果当前页面与上一个页面属于同一个应用，可以使用 sessionStorage 或 localStorage 存储上一个页面的URL参数。这样，在当前页面获取参数时，只需读取存储的数据即可。

  1. 在上一个页面获取URL参数，并使用 sessionStorage.setItem('params', JSON.stringify(params)); 存储到 sessionStorage 中。
  2. 在当前页面使用 sessionStorage.getItem('params') 获取存储的参数。
// 上一个页面
var params = {};
// ...获取URL参数
sessionStorage.setItem('params', JSON.stringify(params));

// 当前页面
var params = JSON.parse(sessionStorage.getItem('params'));
console.log(params); // 输出参数对象

总结

以上三种方法可以帮助我们在JavaScript中获取上一个页面的URL参数。根据具体的应用场景和需求，可以选择最合适的方法。希望本文能对您有所帮助。

-- 展开阅读全文 --