时间戳

首页 > 解决方案 > Javascript 在页面更改时保留 URL 参数

javascript - Javascript 在页面更改时保留 URL 参数

问题描述

我正在使用香草 Javascript，

我有两个页面，page01.html这些page02.html页面共享相同的导航系统。

我想将参数加载到 的 url 中page01，单击page02导航后，page02将在其 URL 中加载参数。

例子：

  1. 我上线了page01.html
  2. 我将参数加载到 URL 中，所以现在我有 page01.html/?param=X
  3. 我点击菜单项page02
  4. 我想加载 page02.html/?param=X

有没有办法在不使用 localStorage 和 sessionStorage 的情况下做到这一点？

标签： javascriptquery-stringwindow.location

解决方案

这是一个使用 vanilla JavaScript 的简单解决方案：

Page01.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div>Page 1</div>

<a href="page02.html">go to page 2</a>

<script>
   var linkToPage2 = document.querySelector("a[href='page02.html']");
   linkToPage2.addEventListener("click", function(e){
   e.preventDefault();
     if(location.search){
       window.location.href = "page02.html" + location.search; 
     }
 });

</script>
</body>
</html>

Page02.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div>Page 2</div>

<a href="page01.html">go to page 1</a>

<script>
    var linkToPage1 = document.querySelector("a[href='page01.html']");
    linkToPage1.addEventListener("click", function(e){
     e.preventDefault();
        if(location.search){ 
             window.location.href = "page01.html" + location.search;
         }
     });
 </script>
 </body>
 </html>

推荐阅读