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

Javascript preserving a URL parameter on page change

我正在使用原版 Javascript,

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

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

示例：

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

有没有不使用 localStorage 和 sessionStorage 的方法来做到这一点？

这是一个使用 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>

我使用了 Bergi 的评论和 Henry 的回答来创建我自己的版本。

基本上我只是在 a 标签上创建了一个 onclick="menuClick();" 和一个 id="menuLink"。 然后在 Javascript 上，我刚刚将 location.search 添加到 href：

menuClick = function() {
    document.getElementById('menuLink').href += location.search
  }