JS实现页面跳转参数不丢失的方法

当我们在页面A中点击链接跳转到页面B时，我们经常需要将一些参数传递给页面B进行处理，如何实现页面跳转参数不丢失呢？下面是一些具体的步骤。

1、将参数存储在URL中

1.1 示例说明

如下面的链接所示，将参数存储在URL中是传递参数的常用方法，它使我们能够轻松地通过将一个键值对与URL结合来传递参数。

<!-- 在页面A中的超链接中传递参数 -->
<a href="http://www.example.com/pageB.html?param1=value1&param2=value2">跳转到页面B</a>

通过给URL附加一个查询字符串，可以将参数传递给页面B。在页面B中，可以使用JavaScript来获取查询字符串，并将其解析成一个包含参数的JSON对象。

// Get the URL query string (e.g. "?param1=value1&param2=value2")
var queryString = window.location.search;

// Use a helper function to parse the query string into an object
var params = parseQueryString(queryString);

function parseQueryString(queryString) {
  // Remove the '?' from the beginning of the query string;
  queryString = queryString.substring(1);

  // Split the query string into an array of key/value pairs
  var kvPairs = queryString.split('&');

  var params = {};

  // Loop through the key/value pairs and add them to params object
  for (var i = 0; i < kvPairs.length; i++) {
    var kv = kvPairs[i].split('=');
    var key = decodeURIComponent(kv[0]);
    var value = decodeURIComponent(kv[1]);
    params[key] = value;
  }

  return params;
}

1.2 步骤说明

为了实现将参数存储在URL中并在页面跳转时不丢失，我们可以遵循以下步骤：

在页面A中的超链接中，将要传递的参数作为查询字符串添加到URL的末尾
在跳转到页面B时，页面将打开一个新的URL，并加载页面B
在页面B中，使用JavaScript读取查询字符串并解析参数
使用解析的参数，在页面中动态地生成内容

2、将参数存储在本地存储中

2.1 示例说明

本地存储提供了一种在页面之间传递数据的机制，它允许我们将数据存储在浏览器中，并在不同的页面之间共享。一种常见的本地存储方式是使用localStorage对象。

在页面A中，我们可以使用localStorage.setItem()方法将参数存储在localStorage对象中。在页面B中，使用localStorage.getItem()方法来读取参数。

// In page A
localStorage.setItem('param1', 'value1');
localStorage.setItem('param2', 'value2');

// In page B
var param1 = localStorage.getItem('param1');
var param2 = localStorage.getItem('param2');

当我们不再需要存储的参数时，我们可以使用localStorage.removeItem()从本地存储中删除参数。