srcmini本文概述
cookie可以定义为浏览器存储在用户计算机中的一小段文本。 Cookies是客户端存储的一种旧机制, 旨在用于ASP, PHP等服务器端脚本语言。
主要是, cookie用于跟踪诸如用户首选项之类的信息, 这些信息可以在用户重新访问网站时检索以个性化页面。 Cookie也可以直接由JavaScript创建, 修改和访问, 但是这样做的过程有些复杂。
为什么需要Cookies？
服务器和Web浏览器使用HTTP协议(无状态协议)进行通信。 HTTP是无状态协议, 因此在处理Web服务器的初始客户端请求后, 它不记得有关客户端所做设置的任何信息。它独立处理每个请求。因此, 服务器在浏览器上发送数据后不会跟踪数据。但是在许多情况下, 将再次需要数据。
客户端和服务器之间的此请求-响应周期称为会话。 Cookies是浏览器用于存储引用用户会话的数据的默认机制。
注意：请勿将你的敏感数据(如密码和信用卡信息)保存在cookie中, 因为恶意用户可能会使用它们。
Cookies如何工作？
服务器以cookie的形式将一些数据发送到用户的浏览器。浏览器可以接受该cookie。如果接受, 则将其作为纯文本记录存储在用户的硬盘驱动器上。现在, 当用户访问同一网站的另一个页面时, 浏览器会将相同的cookie发送到服务器以进行检索。一旦检索到, 相应的服务器就会记住之前存储的内容。
Cookies是包含五个可变长度字段的纯文本数据记录
- 名称和值：Cookie的设置和检索采用键值的形式
- 域名：这是网站的域名。
- 路径：包括设置Cookie的网页或目录。如果你需要从任何页面或目录检索cookie, 则可以为空白。它的默认值是当前页面的路径。
- 安全：顾名思义, 可以使用安全服务器检索Cookie。如果该字段为空白, 则不需要此类限制。
- 过期：这是Cookie过期的日期。如果此字段为空, 则cookie将在用户退出浏览器时过期。
最初, cookie是为CGI(通用网关接口)编程而设计的。 Cookie中的数据在Web服务器和Web浏览器之间自动传输。因此, 服务器上的CGI脚本可以读取和写入存储在客户端的cookie的值。
在JavaScript中, 我们可以使用文档对象的cookie属性来操作cookie。我们还可以创建, 读取, 删除和修改适用于当前页面的cookie。
储存饼干
创建或存储新cookie的最简单方法是将name = value字符串值分配给document.cookie对象。它看起来像这样：
"document.cookie = "key1 = value1; key2 = value2; expires = date";上述语法中的expire属性是可选的。如果我们手动为该属性提供有效的日期和时间, 则cookie将在给定的日期和时间过期。
Cookie的值不能包含空格, 逗号或分号。因此, 在将它们存储在cookie中之前, 我们将需要使用escape()函数(JavaScript的内置函数)对包含这些字符的值进行编码。同样, 我们还需要使用相应的unescape()函数来读取cookie值。
document.cookie = "name=" + escape("XYZ");默认情况下, 上述cookie的生存期是当前浏览器会话。这意味着它将在用户退出浏览器时丢失。
Cookie过期属性
你可以使用expires属性指定cookie的生存期。此属性提供了一种创建持久性cookie的方法。在这里, 时间和日期的声明表示cookie的有效期。一旦经过了声明的时间, cookie将自动删除。
例如：
document.cookie="username=XYZ;expires=Mon, 10 Aug 2040 12:00:00 UTC";Cookie的最大年龄属性
为了使cookie能够在当前浏览器的会话之后继续存在, 我们需要指定其生存期(以秒为单位)。我们也可以通过使用max-age属性来指定它。它是expires属性的替代方法, 该属性指定cookie从当前时刻起的秒数。此属性确定cookie的生存期, 即该cookie在删除前可以在用户系统上保留多长时间。
如果max-age属性的值为零或负, 则将删除cookie。
例如：以下cookie的生存期为30天。
document.cookie="username=XYZ;max-age=" + (60*60*24*30) + ";"存储cookie的示例
让我们尝试通过以下示例来理解设置cookie的图示：
<html>
<head>
<title>Cookie Example</title>
</head>
<body style="text-align:center;">
<form name = "myform" action = " ">
Enter Name: <input type="text" name="uname" >
<input type="button" value="setCookie" onclick="setCookie()">
</form>
<script>
function setCookie()
{
if(document.myform.uname.value == ""){
alert("Required Name");
return;
}
value = escape(document.myform.uname.value) + ";";
document.cookie = "name = " + value;
document.write ("Cookie: " + "name = " + value);
}
</script>
</body>
</html>输出如下
成功执行以上代码后, 你将获得以下输出。
如果文本字段为空, 并且你正在单击setCookie按钮, 那么你将收到警报, 如下图所示。
输入所需的值并单击setCookie按钮后, 你将看到以下输出。
阅读饼干
读取cookie比设置cookie稍微复杂一些, 因为document.cookie属性会返回一个字符串, 其中包含一个由空格和分号分隔的所有cookie列表。你可以在需要访问cookie的地方使用此字符串。
要从列表中获取Cookie, 你可以使用字符串的split()函数以键和值的形式断开字符串。
例子
function getCookie() {
var cookievalue = document.cookie;
document.write ("Cookies : " + cookievalue );
}
// get all the pairs of cookies in an array
arr = cookievalue.split(';');
// take key-value pair out of this array
for(var i = 0; i<arr.length; i++) // length is the array class method which returns array length.
{
name = arr[i].split('=')[0];
value = arr[i].split('=')[1];
}更新Cookies
在JavaScript中, 你可以使用创建新值的方式来覆盖cookie, 就像创建cookie一样。更新或修改cookie的唯一方法是创建另一个cookie。如果你创建的cookie具有相同的名称, 但路径与现有路径不同, 则会导致添加新的cookie。
例子
// Creating the cookie
document.cookie = "name=XYZ;path=/;max-age=" + 365*24*60*60;
// Updating the cookie
document.cookie = "name=ABC;path=/;max-age=" + 30*24*60*60;删除Cookie
在某些情况下, 你想删除Cookie。删除cookie的过程非常简单。你不需要指定cookie的值即可将其删除。为此, 你需要将” expires”属性的值设置为通过日期。
你可以在以下代码中看到相同的插图：
document.cookie = "name=value; expires= Thu, 21 Aug 2014 16:00:00 UTC; path=/ "
评论前必须登录！
注册