CSS 使用JavaScript设置和获取cookie

在本文中，我们将介绍如何使用CSS和JavaScript设置和获取cookie。

阅读更多：CSS 教程

什么是cookie？

Cookie是网站存储在用户计算机上的小型文本文件。它们用于存储有关用户的信息，以便在页面加载时进行访问和使用。

设置Cookie

要设置cookie，我们可以使用JavaScript的document.cookie属性。我们可以通过将cookie赋值给这个属性来设置它的值。下面是一个设置cookie的示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

在上面的示例中，我们设置了一个名为username的cookie，值为John Doe。我们还设置了cookie的过期日期为Thu, 18 Dec 2023 12:00:00 UTC，路径为根路径。

获取Cookie

要获取cookie的值，我们可以使用JavaScript的document.cookie属性。我们可以通过使用正则表达式或分割字符串的方式来提取所需的cookie值。下面是一个获取cookie的示例：

function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}

const username = getCookie("username");
console.log(username); // 输出：John Doe

在上面的示例中，我们定义了一个名为getCookie的函数来获取cookie的值。我们首先获取所有的cookie字符串，然后通过分割字符串和正则表达式来找到所需的cookie值。

删除Cookie

要删除cookie，我们可以将cookie的过期日期设置为一个过去的日期。下面是一个删除cookie的示例：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

在上面的示例中，我们将cookie的过期日期设置为Thu, 01 Jan 1970 00:00:00 UTC，这将使cookie立即过期并从用户计算机中删除。

注意事项

使用cookie时需要注意以下几点：
– Cookie的存储大小限制为4KB。
– Cookie是明文存储在用户计算机上的，因此请不要在cookie中存储敏感信息。
– 同一域名下的cookie是共享的，因此请确保cookie的名称是唯一的。

示例 – 使用Cookie记录用户喜好

下面是一个示例，演示如何使用cookie来记录用户的喜好：

<!DOCTYPE html>
<html>
<head>
<style>
#btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#result {
  margin-top: 20px;
}
</style>
<script>
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}

function checkCookie() {
  const theme = getCookie("theme");
  if (theme) {
    document.body.classList.add(theme);
  }
}

function toggleTheme() {
  const body = document.body;
  if (body.classList.contains("dark")) {
    body.classList.remove("dark");
    setCookie("theme", "", -1);
  } else {
    body.classList.add("dark");
    setCookie("theme", "dark", 30);
  }
}
</script>
</head>
<body onload="checkCookie()">
<h1>使用Cookie记录用户喜好</h1>
<button id="btn" onclick="toggleTheme()">切换主题</button>
<p id="result">喜欢的主题：暗黑模式</p>
</body>
</html>

在上面的示例中，我们定义了一个toggleTheme函数来切换页面的主题。当用户点击按钮时，该函数将添加或删除dark类，并设置或删除themecookie。我们还定义了一个checkCookie函数，用于在页面加载时检查是否存在主题的cookie，并相应地应用主题。