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中并在页面跳转时不丢失，我们可以遵循以下步骤：

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

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()从本地存储中删除参数。

2.2 步骤说明

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

1. 在页面A中，使用localStorage.setItem()方法将参数存储在localStorage对象中
2. 在跳转到页面B时，页面将打开一个新的URL，并加载页面B
3. 在页面B中使用localStorage.getItem()方法读取存储的参数
4. 使用读取的参数，在页面中动态地生成内容

总结：以上两种方法都能够实现页面跳转时传递参数并在接收页面中访问参数。但是，“将参数存储在URL中”更加简单，实现成本较低，因为没有必需的检查是否创建过localStorage对象和本地存储的剩余容量问题，使用场景更应该基于个人情况而定。如果参数较多，可以考虑使用第二种方法。