导航添加Cookie保存状态实例

好的,根据您的要求,可以使用以下的实现方法:

HTML

首先在 HTML 文件中,定义需要保存选中状态的导航链接,并为它们添加 data-nav 属性,以便在 JavaScript 中使用。

<nav>
  <a href="/" data-nav="home">Home</a>
  <a href="/about" data-nav="about">About</a>
  <a href="/contact" data-nav="contact">Contact</a>
</nav>

JavaScript

然后,在 JavaScript 文件中,可以实现如下的代码来保存和读取 cookie。

// 保存选中的导航到 cookie
function saveSelectedNav(navId) {
  document.cookie = "selectedNav=" + navId + ";path=/";
}

// 获取 cookie 中保存的选中导航
function getSelectedNav() {
  var name = "selectedNav=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// 设置初始选中的导航
var selectedNavId = getSelectedNav();
if (selectedNavId !== "") {
  var selectedNav = document.querySelector("[data-nav='" + selectedNavId + "']");
  if (selectedNav) {
    selectedNav.classList.add("active");
  }
}

// 给导航链接加上点击事件,保存选中的导航到 cookie
var navLinks = document.querySelectorAll("nav a");
for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener("click", function(event) {
    var navId = event.target.getAttribute("data-nav");
    saveSelectedNav(navId);

    // 取消之前选中的导航的样式,设置当前选中的导航的样式
    var selectedNav = document.querySelector("nav .active");
    if (selectedNav) {
      selectedNav.classList.remove("active");
    }
    event.target.classList.add("active");
  });
}

上述代码中首先实现了 saveSelectedNavgetSelectedNav 这两个函数,分别用来设置和获取名为 selectedNav 的 cookie,保存了选中的导航的 ID。设置 Cookie 的时候,为了让 Cookie 在整个网站有效,使用了 path=/ 的参数。读取 cookie 时,通过 getSelectedNav() 函数来获取 selectedNav 的值。

在初始化页面时,可以获取 selectedNav 的值,如果 cookie 中保存的选中导航存在,则将对应的导航设置为选中状态。

然后通过遍历所有导航链接,并添加 click 事件,点击时更新 cookie 中的 selectedNav Cookie,同时也会更新选中导航的样式。

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/2048
0 评论
795

发表评论

!