Javascript教程
JavaScript基础
JavaScript Objects
JavaScript BOM
JavaScript DOM
JavaScript OOP
JavaScript Cookies
JavaScript事件
JavaScript异常
JavaScript常用

JavaScript Cookie

Cookie是在服务器端和客户端之间保留的大量信息。 Web浏览器在浏览时会存储此信息。
Cookie通常以名称/值对形式(用分号分隔)将信息作为字符串包含在字符串中。它维护用户的状态并记住所有网页之间的用户信息。

Cookie的工作原理是什么?

当用户向服务器发送请求时,该请求中的每一个都被视为另一用户发送的新请求。 因此,要识别旧用户,我们需要将cookie与服务器的响应一起添加。 客户端的浏览器。 现在,每当用户向服务器发送请求时,该cookie就会自动添加到该请求中。由于使用cookie,服务器可以识别用户。  JavaScript Cookies

如何在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="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>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4