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

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");
  });
}

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

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

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