本文概要
Cookie是信息的量的一个服务器侧和客户端侧之间持续。 Web浏览器存储在浏览的时候,该信息。
一个cookie包含的信息如一般在由分号分隔的名称 – 值对的形式的字符串。它维护用户的状态并记住用户的所有网页中的信息。
如何使用Cookie?
- 当用户向服务器发送一个请求,那么每个该请求将被视为由不同的用户发送的一个新的请求。
- 因此,要认识到老用户,我们需要从服务器的响应添加cookie。
- 浏览器的客户端。
- 现在,只要用户向服务器发送一个请求,该cookie与该请求自动添加。由于该cookie,服务器可以识别用户。
如何在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>
评论前必须登录!
注册