Cookie(Cookie是一种信息)是在服务器端和客户端之间保持持久性的一种数据。在浏览期间,Web浏览器会存储这些信息。

Cookie通常包含数据,通常以键值对的形式,由分号分隔。它有助于维护用户状态并在不同的网页之间记住用户信息。

Cookie的工作原理

  • 当用户向服务器发送请求时,每个请求都被视为来自不同用户的新请求。
  • 为了识别回头用户,需要在服务器的响应中添加Cookie。
  • 这些Cookie然后由浏览器存储在客户端。
  • 当用户向服务器发送请求时,Cookie会自动包含在请求中。这使得服务器能够识别用户。

1.png

如何在JavaScript中创建Cookie?

在JavaScript中,可以使用document.cookie属性创建、读取、更新和删除Cookie。

以下语法用于创建Cookie:

document.cookie="name=value";

JavaScript Cookie 示例

示例 1

让我们看一个设置和获取Cookie的示例。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="获取Cookie" onclick="getCookie()">
<script>
function setCookie() { 
  document.cookie = "username=Duke Martin"; 
}
function getCookie() { 
  if (document.cookie.length != 0) { 
    alert(document.cookie); 
  } else { 
    alert("Cookie不可用"); 
  } 
}
</script>
</body>
</html>

示例 2

在这里,我们将Cookie的名称-值对分开显示。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="设置Cookie" onclick="setCookie()">
<input type="button" value="获取Cookie" onclick="getCookie()">
<script>
function setCookie() { 
  document.cookie = "username=Duke Martin"; 
}
function getCookie() { 
  if (document.cookie.length != 0) { 
    var array = document.cookie.split("="); 
    alert("名称=" + array[0] + " 值=" + array[1]); 
  } else { 
    alert("Cookie不可用"); 
  } 
}
</script>
</body>
</html>

示例 3

在这个示例中,我们提供颜色选择,并将选定的颜色值传递给Cookie。现在,Cookie会在浏览器中存储用户的最后选择。因此,在重新加载网页时,用户的上次选择将显示在屏幕上。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="color" onchange="display()">
  <option value="Select Color">选择颜色</option>
  <option value="yellow">黄色</option>
  <option value="green">绿色</option>
  <option value="red">红色</option>
</select>
<script type="text/javascript">
function display() { 
  var value = document.getElementById("color").value; 
  if (value != "Select Color") { 
    document.bgColor = value; 
    document.cookie = "color=" + value; 
  } 
}
window.onload = function () { 
  if (document.cookie.length != 0) { 
    var array = document.cookie.split("="); 
    document.getElementById("color").value = array[1]; 
    document.bgColor = array[1]; 
  } 
}
</script>
</body>
</html>

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全