ECMAScript/ES6 Cookies

精华

小牛编辑

169浏览

2023-03-14

cookie可以定义为浏览器存储在用户计算机中的一小段文本。 Cookies是客户端存储的一种旧机制，旨在用于ASP，PHP等服务器端脚本语言。
主要是，cookie用于跟踪诸如用户首选项之类的信息，这些信息可以在用户重新访问网站时检索以个性化页面。 Cookie也可以直接由JavaScript创建，修改和访问，但是这样做的过程有些复杂。

1.为什么需要Cookies？

服务器和Web浏览器使用HTTP协议(无状态协议)进行通信。 HTTP是无状态协议，因此在处理Web服务器的初始客户端请求后，它不记得有关客户端所做设置的任何信息。它独立处理每个请求。因此，服务器在浏览器上发送数据后不会跟踪数据。但是在许多情况下，将再次需要数据。

客户端和服务器之间的此请求-响应周期称为会话。 Cookies是浏览器用于存储引用用户会话的数据的默认机制。

注意：请勿将您的敏感数据(如密码和信用卡信息)保存在cookie中，因为恶意用户可能会使用它们。

2.Cookies如何工作？

服务器以cookie的形式将一些数据发送到用户的浏览器。浏览器可以接受该cookie。如果接受，则将其作为纯文本记录存储在用户的硬盘驱动器上。现在，当用户访问同一网站的另一个页面时，浏览器会将相同的cookie发送到服务器以进行检索。一旦检索到，相应的服务器就会记住之前存储的内容。

Cookies是包含五个可变长度字段的纯文本数据记录：

name和value：Cookie的设置和检索采用键值的形式。
Domain：这是网站的域名。
Path：包括设置Cookie的网页或目录。如果需要从任何页面或目录检索cookie，则可以为空白。它的默认值是当前页面的路径。
Secure：顾名思义，可以使用安全服务器检索Cookie。如果该字段为空白，则不需要此类限制。
Expires：这是Cookie过期的日期。如果此字段为空，则cookie将在用户退出浏览器时过期。

最初，cookie是为CGI(通用网关接口)编程而设计的。 Cookie中的数据在Web服务器和Web浏览器之间自动传输。因此，服务器上的CGI脚本可以读取和写入存储在客户端的cookie的值。

在JavaScript中，我们可以使用文档对象的cookie属性来操作cookie。我们还可以创建，读取，删除和修改适用于当前页面的cookie。

3.储存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的生存期是当前浏览器会话。这意味着它将在用户退出浏览器时丢失。

4.Cookie过期属性

可以使用expires属性指定cookie的生存期。此属性提供了一种创建持久性cookie的方法。在这里，时间和日期的声明表示cookie的有效期。一旦经过了声明的时间，cookie将自动删除。

示例：

document.cookie="username=XYZ;expires=Mon, 10 Aug 2030 12:00:00 UTC";

5.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按钮后，将看到以下输出：

6.读取cookie

读取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];  
}

7.更新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;

8.删除Cookie

在某些情况下，想删除Cookie。删除cookie的过程非常简单。不需要指定cookie的值即可将其删除。为此需要将expires属性的值设置为通过日期。

示例代码：

document.cookie = "name=value; expires= Thu, 21 Aug 2020 16:00:00 UTC; path=/ "