在cookies中存储设置

Question

我做了一些设置，但每次刷新页面或转到网站上的另一个页面时，这些设置都会恢复为默认值。如何将用户设置存储在 cookie 中，以便在用户刷新或进入另一个页面时保持原样？设置是切换到深色模式的选项和切换语言的选项。

语言：

//html code//
<div class="language">
          <div class="langWrap">
            <a href="#"  language='dutch' class="lang active">NL</a>
            <a href="#"  language='english' class="lang">EN</a>
            <a href="#"  language='spanish' class="lang">ES</a>
            <a href="#"  language='indonesian' class="lang">ID</a>
          </div>
        </div>

//javascript code//
const langEl = [...document.querySelectorAll(".lang")];

let chosenLanguage = 'NL';

langEl.forEach((el) => {
    el.addEventListener("click", () => {
      langEl.map(item => item.classList.contains("active") ? item.classList.remove("active") : false);
      el.classList.add("active");
      chosenLanguage = el.innerText;
      search();
  
      const attr = el.getAttribute("language");
   });
});

深色模式主题：

//html code//
<img src="../images/moon.png" id="icon">

//javascript code//
var icon = document.getElementById("icon");

icon.onclick = function() {
  document.body.classList.toggle("dark-theme");
  if(document.body.classList.contains("dark-theme")){
    icon.src = "images/sun.png";
  } else {
    icon.src = "images/moon.png";
  }
}

Answer 1

我不确定 cookie 是存储用户偏好的最佳位置。 Cookie 会发送到服务器，因此如果您不打算将这些首选项存储在服务器上，则使用额外的网络是没有用的。我认为使用 localStorage 更适合您的需求。

无论如何，w3schools提供了两个很好的函数来处理Javascript中的cookie：

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

现在，如果您想使用 localStorage，Mozilla 的文档是一个好的开始。

localStorage.setItem("darkmode", "true");
var darkmode = localStorage.getItem("darkmode") === "true";