JavaScript Cookie
JavaScript Cookie
Cookie是在服务器端和客户端之间保留的大量信息。 Web浏览器在浏览时会存储此信息。
Cookie通常以名称/值对形式(用分号分隔)将信息作为字符串包含在字符串中。它维护用户的状态并记住所有网页之间的用户信息。
Cookie的工作原理是什么？
当用户向服务器发送请求时，该请求中的每一个都被视为另一用户发送的新请求。
因此，要识别旧用户，我们需要将cookie与服务器的响应一起添加。
客户端的浏览器。
现在，每当用户向服务器发送请求时，该cookie就会自动添加到该请求中。由于使用cookie，服务器可以识别用户。
如何在JavaScript中创建Cookie？
在JavaScript中，我们可以使用
document.cookie 属性创建，读取，更新和删除cookie。
document.cookie 属性创建，读取，更新和删除cookie。
以下语法用于创建cookie：
document.cookie="name=value";
JavaScript Cookie示例
示例1
让我们看一个设置和获取cookie的示例。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
示例2
在这里，我们分别显示cookie的名称/值对。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin";
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
示例3
在此示例中，我们提供了颜色选择，并将选定的颜色值传递给cookie。现在，cookie将用户的最后选择存储在浏览器中。因此，在重新加载网页时，用户的最后选择将显示在屏幕上。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="color" onchange="display()">
<option value="Select Color">Select Color</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="red">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>