ES6 Cookies介绍和用法示例

本文概述

为什么需要Cookies？
Cookies如何工作？
储存饼干
Cookie过期属性
Cookie的最大年龄属性
阅读饼干
更新Cookies
删除Cookie

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="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介绍和用法示例】你可以在以下代码中看到相同的插图：