沃梦达 / 编程技术 / 前端开发 / 正文

JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

沃梦达教程前端开发

2024-02-08 6

请看以下示范：

请看以下示范：

JAVASCRIPT实现的WEB页面跳转以及页面间传值

页面跳转

在 JavaScript 中，可以通过修改 window.location 对象的属性来实现页面跳转。

直接跳转

// 直接跳转到目标 URL
window.location = "https://www.example.com";

重定向跳转

// 通过重定向跳转到目标 URL
window.location.replace("https://www.example.com");

页面传值

在跳转页面时，有时需要将数据传递给目标页面，可以使用以下两种方式进行传值：

URL 参数传值

可以将需要传递的数据作为 URL 参数在跳转时传递给目标页面，目标页面可以通过解析 URL 参数来获取传递的数据。

例如，需要在跳转时传递用户名和密码：

// 构建跳转 URL
let url = "https://www.example.com/login.html";
url += "?username=johndoe";
url += "&password=123456";

// 跳转到目标页面，同时传递参数
window.location = url;

在目标页面中解析 URL 参数：

// 获取 URL 中的参数
let searchParams = new URLSearchParams(window.location.search);

// 获取传递的用户名和密码
let username = searchParams.get("username");
let password = searchParams.get("password");

localStorage 存储传值

可以使用 localStorage 对象在本地存储数据，从而实现页面传值的目的。需要注意的是，使用 localStorage 存储的数据只能被同域名的页面访问。

例如，需要在页面 A 中存储数据，并在页面 B 中获取：

// 页面 A 中存储数据
localStorage.setItem("username", "johndoe");
localStorage.setItem("password", "123456");

// 跳转到页面 B
window.location = "https://www.example.com/page-b.html";

在页面 B 中获取存储的数据：

// 获取存储的用户名和密码
let username = localStorage.getItem("username");
let password = localStorage.getItem("password");

// 删除存储的数据（可选）
localStorage.removeItem("username");
localStorage.removeItem("password");