本文概述
- 为什么需要Cookies?
- Cookies如何工作?
- 储存饼干
- Cookie过期属性
- Cookie的最大年龄属性
- 阅读饼干
- 更新Cookies
- 删除Cookie
主要是, cookie用于跟踪诸如用户首选项之类的信息, 这些信息可以在用户重新访问网站时检索以个性化页面。 Cookie也可以直接由JavaScript创建, 修改和访问, 但是这样做的过程有些复杂。
为什么需要Cookies? 服务器和Web浏览器使用HTTP协议(无状态协议)进行通信。 HTTP是无状态协议, 因此在处理Web服务器的初始客户端请求后, 它不记得有关客户端所做设置的任何信息。它独立处理每个请求。因此, 服务器在浏览器上发送数据后不会跟踪数据。但是在许多情况下, 将再次需要数据。
客户端和服务器之间的此请求-响应周期称为会话。 Cookies是浏览器用于存储引用用户会话的数据的默认机制。
注意:请勿将你的敏感数据(如密码和信用卡信息)保存在cookie中, 因为恶意用户可能会使用它们。 Cookies如何工作? 服务器以cookie的形式将一些数据发送到用户的浏览器。浏览器可以接受该cookie。如果接受, 则将其作为纯文本记录存储在用户的硬盘驱动器上。现在, 当用户访问同一网站的另一个页面时, 浏览器会将相同的cookie发送到服务器以进行检索。一旦检索到, 相应的服务器就会记住之前存储的内容。
Cookies是包含五个可变长度字段的纯文本数据记录
- 名称和值:Cookie的设置和检索采用键值的形式
- 域名:这是网站的域名。
- 路径:包括设置Cookie的网页或目录。如果你需要从任何页面或目录检索cookie, 则可以为空白。它的默认值是当前页面的路径。
- 安全:顾名思义, 可以使用安全服务器检索Cookie。如果该字段为空白, 则不需要此类限制。
- 过期:这是Cookie过期的日期。如果此字段为空, 则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="http://www.srcmini.com/setCookie" onclick="setCookie()">
<
/form>
<
script>
function setCookie(){if(document.myform.uname.value =http://www.srcmini.com/=""){alert("Required Name");
return;
}value =http://www.srcmini.com/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=http://www.srcmini.com/document.cookie;
document.write ("Cookies : " + cookievalue );
}// get all the pairs of cookies in an arrayarr = cookievalue.split(';
');
// take key-value pair out of this arrayfor(var i = 0;
i<
arr.length;
i++) // length is the array class method which returns array length.{ name=arr[i].split('=')[0];
value =http://www.srcmini.com/arr[i].split('=')[1];
}
更新Cookies 在JavaScript中, 你可以使用创建新值的方式来覆盖cookie, 就像创建cookie一样。更新或修改cookie的唯一方法是创建另一个cookie。如果你创建的cookie具有相同的名称, 但路径与现有路径不同, 则会导致添加新的cookie。
例子
// Creating the cookiedocument.cookie = "name=XYZ;
path=/;
max-age=" + 365*24*60*60;
// Updating the cookiedocument.cookie = "name=ABC;
path=/;
max-age=" + 30*24*60*60;
删除Cookie 在某些情况下, 你想删除Cookie。删除cookie的过程非常简单。你不需要指定cookie的值即可将其删除。为此, 你需要将” expires” 属性的值设置为通过日期。
【ES6 Cookies介绍和用法示例】你可以在以下代码中看到相同的插图:
document.cookie = "name=value;
expires= Thu, 21 Aug 2014 16:00:00 UTC;
path=/ "
推荐阅读
- ES6条件语句介绍和用法示例
- ES6类介绍和用法详解
- ES6箭头函数介绍和用法示例
- ES6 boolean介绍和用法示例
- ES6数组介绍和用法
- ES6数组解构详细用法解析
- ES6数组方法介绍和示例
- ES6动画介绍和用法示例
- ES5和ES6之间的详细比较