js的跳转传参方式

在JavaScript中，实现页面跳转并传递参数的方式有多种，以下是一些常见的方法：

1. URL参数

你可以通过修改URL的查询字符串（query string）来传递参数。这些参数会在URL的?之后，并使用&进行分隔。

代码

	// 跳转到另一个页面并传递参数
	window.location.href = 'target_page.html?param1=value1&param2=value2';

在目标页面中，你可以使用URLSearchParams接口或正则表达式从URL中提取参数。

代码

	// 在目标页面中获取参数
	const queryParams = new URLSearchParams(window.location.search);
	const param1 = queryParams.get('param1'); // "value1"
	const param2 = queryParams.get('param2'); // "value2"

1. 哈希（Hash）参数

除了查询字符串外，你还可以使用URL的哈希部分（在#之后）来传递参数。但请注意，这种方法主要用于在客户端存储状态，而不是用于服务器端的路由。

代码

	// 跳转到另一个页面并传递哈希参数
	window.location.href = 'target_page.html#param1=value1&param2=value2';

在目标页面中，你可以使用window.location.hash来获取哈希部分，并使用相应的方法解析参数。
3. 会话存储（Session Storage）或本地存储（Local Storage）

对于更复杂的场景，你可能希望使用Web Storage API（包括sessionStorage和localStorage）来存储和检索数据。这些存储机制允许你在同一源（协议、域名和端口）的不同页面之间共享数据。

代码

	// 在一个页面中存储数据
	sessionStorage.setItem('param1', 'value1');
	localStorage.setItem('param2', 'value2');
	// 在另一个页面中检索数据
	const param1 = sessionStorage.getItem('param1'); // "value1"
	const param2 = localStorage.getItem('param2'); // "value2"

请注意，sessionStorage中的数据在页面会话结束时（通常是浏览器窗口或标签页关闭时）会被清除，而localStorage中的数据则会在用户清除浏览器数据或手动删除之前一直存在。
4. Cookie

虽然Cookie主要用于服务器与客户端之间的通信，但你也可以使用它们来在客户端的不同页面之间传递数据。然而，由于Cookie的大小限制和每次HTTP请求都会发送Cookie的潜在性能问题，因此它们通常不是传递大量数据的首选方法。
5. 使用JavaScript库或框架

如果你正在使用JavaScript库或框架（如React、Vue、Angular等），那么可能会有更优雅和简洁的方法来管理和传递数据。例如，在React中，你可以使用React Router库来处理路由和参数传递。