javascript - 将条目索引页面存储到 cookie 并将访问者发送回该索引页面，而不考虑文件夹

Question

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

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

标签： javascripthtmlcookies

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>