点击跳转，将A页面参数带到B页面

最新推荐文章于 2025-05-27 13:59:24 发布

原创最新推荐文章于 2025-05-27 13:59:24 发布 · 4.1k 阅读

10 ·

CC 4.0 BY-SA版权

前端开发笔记专栏收录该内容

36 篇文章

订阅专栏

故事起源：

今天有个网友有个网友问我，怎么从A页面跳转到B页面，并且把参数带过去。Emm……之前我也做个类似的事情，觉得无足轻重，就没有记录下来了，今天想想，问题不分大小。Emm……直接送佛送到西，和大家分享一下吧！

Emm……后来回想了一下我的博客，之前的确写过相关的文章，罪过罪过……html通过url传值

其实传参的方式还有一种方法，就是将参数set到缓存中，然后需要的时候再将其get取出。

一个demo告诉你怎么用：

A页面：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>我是A页面</title>
 </head>

 <body>
   <a href="b.html" target="_blank" class="open-popup" my-data="123456" onclick="setData(this)" style="color: #23ade5;">我是123456

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    function setData(obj) {
        var id = $(obj).attr("my-data");
        window.localStorage.setItem("id", id);
        alert(id);
    }
</script>

</body>
</html>

B页面：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>我是B页面</title>
 </head>
 <body onload="loads();">

 <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
 <script>
    function loads(){
    var id=window.localStorage.getItem("id")
    alert(id);
    };
  </script>
 </body>
</html>

效果：在A页面——点击“我是123456”，跳转到B页面弹出参入的参数