ES6 Cookies

cookie可以定义为浏览器存储在用户计算机中的一小段文本。 Cookies是客户端存储的一种旧机制，被设计用于ASP， php等服务器端脚本语言。

主要是，cookie用于跟踪诸如用户首选项之类的信息，这些信息可以在用户重新访问网站时检索以个性化页面。 Cookie也可以由JavaScript直接创建，修改和访问，但是这样做的过程有些复杂。

为什么需要Cookies?

服务器和Web浏览器使用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()函数( 函数)对包含这些字符的值进行编码。同样，我们还需要使用相应的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";  

Cookies的最大年龄属性

为了使cookie能够在当前浏览器的会话之后继续存在，我们需要指定其生存期(以秒为单位) 。我们也可以通过使用max-age属性来指定它。它是expires属性的替代方法，该属性指定cookie从当前时刻起的秒数。此属性确定cookie的生存期，即该cookie在删除前可以在用户系统上保留多长时间。

如果max-age属性的值为零或负，则删除cookie。

例如：以下cookie的生存期为30天。

document.cookie="username=XYZ;max-age=" + (60*60*24*30) + ";"  

存储cookie的示例

让我们尝试通过以下示例来理解设置cookie的图示：

  

  
 
    

        Enter Name: 
  
   
     
  

输出量

成功执行以上代码后，您将获得以下输出。

如果文本字段为空，并且您正在单击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

更新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=/ "