ES6 - Cookies

Web浏览器和服务器使用HTTP协议进行通信. HTTP是无状态协议,即它不会在客户端发出的多个请求中维护客户端的数据.客户端和服务器之间的完整请求 - 响应周期被定义为会话. Cookie是浏览器用于存储与用户会话相关的数据的默认机制.

工作原理是什么?

您的服务器将一些数据发送给访客的浏览器以cookie的形式.浏览器可以接受cookie.如果是,则将其作为纯文本记录存储在访问者的硬盘上.现在,当访问者到达您网站上的另一个页面时,浏览器会将相同的cookie发送到服务器进行检索.一旦检索到,您的服务器就会知道/记住之前存储的内容.

Cookie是5个可变长度字段的纯文本数据记录.

  • 过期 :  Cookie过期的日期.如果这是空白,则当访问者退出浏览器时,Cookie将过期.

  • : 您网站的域名.

  • 路径 : 设置cookie的目录或网页的路径.如果您想从任何目录或页面检索cookie,这可能是空白.

  • 安全 : 如果此字段包含单词"secure",则只能使用安全服务器检索cookie.如果此字段为空,则不存在此类限制.

  • 名称=值 :  Cookie以键值对的形式设置和检索.

Cookie最初是为CGI编程而设计的. cookie中包含的数据在Web浏览器和Web服务器之间自动传输,因此服务器上的CGI脚本可以读取和写入存储在客户端的cookie值.

JavaScript也可以使用Document对象的cookie属性来操作cookie. JavaScript可以读取,创建,修改和删除适用于当前网页的cookie.

存储Cookie

创建一个最简单的方法cookie是为 document.cookie 对象分配一个字符串值,如下所示.

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

此处,'expires'属性是可选的.如果您为此属性提供有效的日期或时间,则cookie将过期在给定的日期或时间及之后,cookie的值将无法访问.

注意 :  Cookie值可能不包括分号,逗号或空格因此,您可能希望使用JavaScript escape()函数对值进行编码,然后将其存储在cookie中.如果这样做,您还必须使用相应的读取cookie值时的unescape()函数.

示例

<html> 
   <head> 
      <script type = "text/javascript">  
         function WriteCookie() {  
            if( document.myform.customer.value == "" ){  
               alert ("Enter some value!");  
               return;  
            }  
            cookievalue =  escape(document.myform.customer.value) + ";";  
            document.cookie = "name = " + cookievalue;  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 
      
   <body> 
      <form name = "myform" action = ""> 
         Enter name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

成功执行上述代码后会显示以下输出.

在你的机器有一个名为name的cookie。 您可以使用以逗号分隔的多个key = value对设置多个cookie。

Reading Cookies

读取cookie就像写一个cookie一样简单,因为document.cookie对象的值是cookie。 因此,只要您想访问cookie,就可以使用此字符串。 document.cookie字符串将保留由分号分隔的名称=值对的列表,其中名称是cookie的名称,值是其字符串值。

您可以使用字符串的split()函数将字符串分解为键和值,如以下示例所示。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
         function ReadCookie() {  
            var allcookies  =  document.cookie;  
            document.write ("All Cookies : " + allcookies ); 
         } 
         // Get all the cookies pairs in an array  
         cookiearray = allcookies.split(';');  
         
         // Now take key value pair out of this array  
         for(var i = 0; i<cookiearray.length; i++) {  
            name  =  cookiearray[i].split('=')[0];  
            value = cookiearray[i].split('=')[1];  
            document.write ("Key is : " + name + " and Value is : " + value); 
         }  
      </script> 
   </head> 

   <body> 
      <form name = "myform" action = ""> 
         <p> click the following button and see the result:</p> 
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/> 
      </form> 
   </body> 
</html>

Note : 这里,length是Array类的一种方法,它返回一个数组的长度。

您的计算机上可能已设置了一些其他Cookie。 上面的代码将显示您机器上设置的所有Cookie。

成功执行上述代码后,将显示以下输出。

Setting Cookies Expiry Date

您可以通过设置到期日期并在Cookie中保存到期日期,将Cookie的有效期延长到当前浏览器会话之外。 这可以通过将'expires'属性设置为日期和时间来完成。 以下示例说明如何将Cookie的到期日期延长1个月。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() + 1 );  
            cookievalue = escape(document.myform.customer.value) + ";"  
            document.cookie = "name = " + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         } 
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

成功执行上述代码后,将显示以下输出。

Deleting a Cookie

有时您会想要删除cookie,以便随后尝试读取cookie不会返回任何内容。 为此,您只需将到期日期设置为过去的时间。 以下示例说明如何通过将其到期日期设置为当前日期之后一个月来删除cookie。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() - 1 );  
            cookievalue = escape(document.myform.customer.value) + ";" 
            document.cookie = "name=" + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

成功执行上述代码后,将显示以下输出。