ES6 IIFE

ES6 Cookies

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

cookies 主要用于跟踪用户偏好等信息，当用户重新访问网站时，可以检索这些信息以对页面进行个性化设置。也可以通过 JavaScript 直接创建、修改和访问 Cookie，但这样做的过程有些复杂。

为什么需要 Cookie？

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

客户端和服务器之间的这种请求-响应循环称为会话。 Cookie 是浏览器用于存储数据的默认机制，这些数据是指用户的会话。

注意: 不要将您的密码和信用卡信息等敏感数据保存在 cookie 中，因为恶意用户可能会使用它。

Cookie 是如何工作的？

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

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

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

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

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

存储 Cookies

创建或存储新 cookie 的最简单方法是将 name = value 字符串值分配给 document.cookie 对象。它看起来像这样:

"document.cookie = "key1 = value1; key2 = value2; expires = date";

上述语法中的expire 属性是可选的。如果我们手动为该属性提供有效的日期和时间，则 cookie 将在给定的日期和时间到期。

cookie 的值不能包含空格、逗号或分号。因此，我们将需要使用escape() 函数(JavaScript 的内置函数 a>) 用于在将包含这些字符的值存储到 cookie 之前对其进行编码。同样，我们还需要使用相应的unescape() 函数来读取cookie值。

document.cookie = "name=" + escape("XYZ");

默认情况下，上述cookie的生存期是当前浏览器会话。这意味着当用户退出浏览器时它将丢失。

Cookies expire 属性

您可以使用expires 属性指定cookie 的生命周期。此属性提供了一种创建持久性 cookie 的方法。此处，时间和日期的声明表示 cookie 的活动期。一旦超过声明的时间，cookie 将自动删除。

例如:

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

Cookies max-age 属性

要使cookie在当前浏览器的会话之外持续存在，我们需要指定其生命周期(以秒为单位)。我们也可以使用 max-age 属性来指定它。它是 expires 属性的替代，它指定从当前时刻开始以秒为单位的 cookie 到期时间。此属性确定 cookie 的生命周期，即在删除之前它可以在用户系统上保留多长时间。

如果 max-age 属性的值是零或否定，则删除cookie。

例如: 以下cookie的生命周期为30天。

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

存储cookies示例

让我们通过以下示例来尝试理解设置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>

输出

成功执行以上代码后，会得到如下输出。

ES6 Cookies_https://bianchenghao6.com_【ES6 教程】_第1张

如果 textfield 为空并且您点击了 setCookie 按钮，那么您将获得一个警报，如下图所示。

ES6 Cookies_https://bianchenghao6.com_【ES6 教程】_第2张

一旦你输入了所需的值并点击setCookie 按钮，然后您将看到以下输出。

ES6 Cookies_https://bianchenghao6.com_【ES6 教程】_第3张

读取 Cookie

读取 cookie 比设置 cookie 稍微复杂一些，因为 document.cookie 属性会返回一个包含空格的字符串 strong> 和分号分隔的所有 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，则会导致添加一个新 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=/ "

ES6 版本

ES6 IIFE