javascript - 将条目索引页面存储到 cookie 并将访问者发送回该索引页面，无论文件夹如何

Question

我的网站的主页/索引页会略有不同，具体取决于访问者来自哪个州。现在，假设访问者通过 https://www.example.com/FLORIDA/index.html 进入网站，然后浏览并单击顶级页面，例如 https://www.example.com/about.html 然后单击该页面上某处的主页链接，我希望它们实际上返回到 https://www.example .com/FLORIDA/index.html 他们进入 session /访问的主页，而不是转到默认的 index.html。

“关于我们”、“条款”、“隐私”、“联系方式”等页面显然都将是顶部文件夹页面。因此，如果有人通过 /FLORIDA/index.html 进入网站，然后访问 about.html，然后单击 about 顶部的主页链接.html，他们会转到默认的index.html。那么是否可以将他们通过 https://www.example.com/FLORIDA/index.html 进入网站的事实存储到 cookie 中，并在浏览时将他们返回到该索引页面然后单击网站其他位置的主页链接？

Answer 1

简单版本 - 访问任何/state/index.html 并在 localStorage 中记住状态

您在每个具有主页 URL 的页面上包含 JS(使用外部 JS 文件) - 该链接需要 id="home"

脚本假设您始终拥有 yourserver.com/state/index.html

如果不是，您需要更改三元

let state = parts.length === 3 ? parts[1] : "";

这是要复制的代码

window.addEventListener("load", function() { // when page loads
  const url = new URL(location.href); 
  const parts = url.pathname.split("/"); // creates ["","page.html"] OR ["","state","index.html"]
  let state = parts.length === 3 ? parts[1] : ""; // get the state from the URL OR
  if (state === "") { // get the state from localStorage instead
    state = localStorage.getItem("state") || ""; 
  }
  if (state) { // do we NOW have a state?
    localStorage.setItem("state",state); 
    url.pathname = state ? "/"+state+"/index.html" : "/index.html";
    [...document.querySelectorAll(".home")].forEach(lnk => lnk.href = url);
  }  
})

由于 stacksnippets 不支持 localStorage，因此在将代码复制到服务器时需要取消注释并删除行。

window.addEventListener("load", function() { // when page loads
  // const url = new URL(location.href); // uncomment on your server
  const url = new URL("https://yourserver.com/florida/index.html"); // remove when on your server
  const parts = url.pathname.split("/"); // creates ["","page.html"] OR ["","state","index.html"]
  console.log(parts)
  let state = parts.length === 3 ? parts[1] : ""; // get the state from the URL OR
  if (state === "") { // get the state from localStorage instead
  // state = localStorage.getItem("state") || ""; // uncomment on your server
  }
  if (state) { // do we NOW have a state?
    // localStorage.setItem("state",state); // uncomment on your server
    url.pathname = state ? "/"+state+"/index.html" : "/index.html";
    [...document.querySelectorAll(".home")].forEach(lnk => lnk.href = url);
  }  
})

<a id="home" href="index.html">Home</a>

完整示例

下面的代码执行以下操作

• 根据 URL 设置事件页面，因此您需要将 about 与 about 相匹配 - 区分大小写
• 如果之前已经设置过，则从 localStorage 设置状态
• 从下拉列表中设置状态。如果需要，它可以重新加载页面

window.addEventListener("load", function() { // when page loads
  // const url = new URL(location.href); // uncomment on your server
  const url = new URL("https://yourserver.com/tutorials"); // remove when on your server
  const ul = document.getElementById("links");
  // let state = localStorage.getItem("state") || ""; // uncomment on your server
  let state = "FLORIDA"; // remove from code on your server

  // state selection
  const stateSel = document.getElementById("stateSel");
  if (state) { // already have a state
    stateSel.value=state;
  }
  stateSel.onchange=function() { // using onchange to trigger later
    state = this.value;
    // localStorage.setItem("state",state); // uncomment on your server
    [...document.querySelectorAll(".home")].forEach(lnk => lnk.href = url);
  };
  stateSel.onchange(); // set the link when loading page
  // active link
  [...ul.querySelectorAll("li")].forEach(function(li) {
    const page = li.getAttribute("data-page");
    li.querySelector("a").classList.toggle("active", url.pathname.indexOf(page) != -1); // set active
  })
})

/* from https://css-snippets.com/simple-horizontal-navigation/ */

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

<div class="nav">
  <ul id="links">
    <li data-page="/index"><a id="home" href="index">Home</a></li>
    <li data-page="/tutorials"><a href="tutorials">Tutorials</a></li>
    <li data-page="/about"><a href="about">About</a></li>
    <li data-page="/news"><a href="news">Newsletter</a></li>
    <li data-page="/contact"><a href="contact">Contact</a></li>
  </ul>
</div>

<select id="stateSel">
  <option value="">Which state?</option>
  <option value="FLORIDA">Florida</option>
  <option value="NEVADA">Nevada</option>
</select>