javascript 页面跳转 传值

在前端开发中，经常会涉及到页面跳转和传值的问题。其中 JavaScript 是一种广泛应用的语言，可以通过其实现页面跳转并传递参数的功能。本文将介绍 JavaScript 页面跳转和传值的方法，并提供一些应用实例。

一、JavaScript 实现页面跳转的方法

1. window.location.href

window.location.href 的作用是加载新的页面。通过这个方法，可以在当前页面跳转到指定的页面。例如，下面的代码可以在当前页面跳转到被指定为 “newpage.html” 的页面：

window.location.href = "newpage.html";

在进行页面跳转的同时，也可以向新页面传递参数。例如：

window.location.href = "newpage.html?username=Tom&age=20";

2. window.location.replace

另一种实现页面跳转的方法是使用 window.location.replace。这个方法的作用是用新的页面替换当前页面。例如，下面的代码将会在当前页面被指定为 “newpage.html” 的页面所替换：

window.location.replace("newpage.html");

对于这个方法而言，在进行页面跳转的同时是不能传递参数的。

3. window.open

window.open 允许以新的浏览器窗口方式打开一个指定的网页。例如，下面的代码将会在新的窗口中打开一个指定为 “newpage.html” 的页面：

window.open("newpage.html");

同样的，通过这个方法同样可以传递参数。例如：

window.open("newpage.html?username=Tom&age=20");

二、JavaScript 页面传参的方法

1. URL 传参数

URL 传参数是实现页面传参的一种简单易用的方法，它将参数作为 URL 中的参数传递给新页面。例如：

window.location.href = "newpage.html?username=Tom&age=20";

在新页面中，可以使用 JavaScript 中的 URLSearchParams 对象获取 URL 中的参数。例如：

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

//获取用户名
const username = searchParams.get('username');

//获取年龄
const age = searchParams.get('age');

2. sessionStorage

sessionStorage 是 HTML5 提供的 Web 存储方案，与 localStorage 相似，但是存储的数据是会话级别的，当会话结束时数据会被清除。可以使用 sessionStorage 在页面之间传递数据。例如，在前一个页面中设置传递的参数：

//设置传递的参数
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

在后一个页面中，可以通过 sessionStorage 获取传递的参数：

//获取传递的参数
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');

3. localStorage

localStorage 也是 HTML5 提供的 Web 存储方案，与 sessionStorage 不同的是，localStorage 存储数据是永久性的，即使关闭页面或浏览器也不会被清除。可以使用 localStorage 在页面之间传递数据。例如，在前一个页面中设置传递的参数：

//设置传递的参数
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

在后一个页面中，可以通过 localStorage 获取传递的参数：

//获取传递的参数
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

三、应用实例

下面是一个实际应用的例子，实现一个包含表单的页面跳转，并将表单中的数据传递到下一个页面。

1. 页面一（index.html）

  
    
  
        用户名：  
          
    
  
    
  
        密码：  
          
    
 
    跳转到页面二 
  
  

2. 页面二（pageTwo.html）

  
    
用户名:
  
    
  
  
  
    
密码：
  
    
  
  
  

在页面一中，当点击提交按钮时，会执行 submitForm 方法，将表单中的数据拼接成一个参数并传递到页面二中。在页面二中，会通过 getSearchParams 方法获取 URL 参数并显示在页面上。

总结

本文介绍了 JavaScript 页面跳转和传值的方法，并提供了一些应用实例，旨在帮助读者更好地理解并掌握这些技术。在实际开发中，应根据情况选择合适的方法，使得页面跳转和传值更加简单、高效、安全。

以上是javascript 页面跳转 传值的详细内容。更多信息请关注PHP中文网其他相关文章！