客戶端存儲-cookie

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

什麼是 Cookie簡介

隨着 Web 應用程序的出現，直接在客戶端存儲用戶信息的需求也隨之出現。這背後的想法是合理 的：與特定用戶相關的信息應該保存在用戶的機器上。不管是登陸信息、我的偏好，仍是其餘數據， Web 應用程序提供者都須要有辦法把它們保存在客戶端，對該問題的第一個解決方案就是 cookie，cookie 由古老的網景公司發明，由一份名爲 Persistent Client State: HTTP Cookies 的規範定義。今天，cookie 只 是在客戶端存儲數據的一個選項

cookie 是存儲於訪問者的計算機中的變量。每當同一臺計算機經過瀏覽器請求某個頁面時，就會發送這個 cookie。你可使用 JavaScript 來建立和取回 cookie 的值。」 - w3school

cookie 是訪問過的網站建立的文件，用於存儲瀏覽信息，例如我的資料信息。

cookie

HTTP cookie 一般也叫做 cookie，最初用於在客戶端存儲會話信息。這個規範要求服務器在響應 HTTP 請求時，經過發送 Set-Cookie HTTP 頭部包含會話信息

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value 
Other-header: other-header-value
複製代碼

限制

由於 cookie 存儲在客戶端機器上，因此爲保證它不會被惡意利用，瀏覽器會施加限制。同時，cookie 也不會佔用太多磁盤空間。

• 不超過 300 個 cookie
• 每一個 cookie 不超過 4096 字節
• 每一個域不超過 20 個 cookie
• 每一個域不超過 81 920 字節
• 最新版 IE 和 Edge 限制每一個域不超過 50 個 cookie
• 最新版 Firefox 限制每一個域不超過 150 個 cookie
• 最新版 Opera 限制每一個域不超過 180 個 cookie
• Safari 和 Chrome 對每一個域的 cookie 數沒有硬性限制。

cookie 的構成

• 名稱：惟一標識 cookie 的名稱。cookie 名不區分大小寫，所以 myCookie 和 MyCookie 是同一 個名稱。不過，實踐中最好將 cookie 名當成區分大小寫來對待，由於一些服務器軟件可能這樣 對待它們。cookie 名必須通過 URL 編碼。
• 值：存儲在 cookie 裏的字符串值。這個值必須通過 URL 編碼。
• 域：cookie 有效的域。發送到這個域的全部請求都會包含對應的 cookie。這個值可能包含子域（如 www.iwhao.top） ，也能夠不包含（如.iwhao.top 表示對 iwhao.top 的全部子域都有效）。若是不明 確設置，則默認爲設置 cookie 的域。
• 路徑：請求 URL 中包含這個路徑纔會把 cookie 發送到服務器。例如，能夠指定 cookie 只能由 www.iwhao.top/books/ 訪問，所以訪問 http:/www.iwhao.top/ 下的頁面就不會發送 cookie，即 使請求的是同一個域。
• 過時時間：表示什麼時候刪除 cookie 的時間戳（即什麼時間以後就不發送到服務器了）。默認狀況下， 瀏覽器會話結束後會刪除全部 cookie。不過，也能夠設置刪除 cookie 的時間。這個值是 GMT 格 式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用於指定刪除 cookie 的具體時間。這樣即便關閉 瀏覽器 cookie 也會保留在用戶機器上。把過時時間設置爲過去的時間會當即刪除 cookie。
• 安全標誌：設置以後，只在使用 SSL 安全鏈接的狀況下才會把 cookie 發送到服務器。例如，請 求 www.iwhao.top 會發送 cookie，而請求 www.iwhao.top 則不會。

js 中的cookie

從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用於客戶端計算機與服務器之間傳遞信息。

在JavaScript中能夠經過 document.cookie 來讀取或設置這些信息。但由於接口過於簡單，只有 BOM 的 document.cookie 屬性。 根據用法不一樣，該屬性的表現迥異。要使用該屬性獲取值時就須要單獨處理下了，能夠經過輔助函數來簡化相應的操做

class CookieUtil {
  static get (name) {
    let cookieName = `${encodeURIComponent (name)}=`,
      cookieStart = document.cookie.indexOf (cookieName),
      cookieValue = null;
    if (cookieStart > -1) {
      let cookieEnd = document.cookie.indexOf (';', cookieStart);
      if (cookieEnd == -1) {
        cookieEnd = document.cookie.length;
      }
      cookieValue = decodeURIComponent (
        document.cookie.substring (cookieStart + cookieName.length, cookieEnd)
      );
    }
    return cookieValue;
  }
  static set (name, value, expires, path, domain, secure) {
    let cookieText = `${encodeURIComponent (name)}=${encodeURIComponent (value)}`;
    if (expires instanceof Date) {
      cookieText += `; expires=${expires.toGMTString ()}`;
    }
    if (path) {
      cookieText += `; path=${path}`;
    }
    if (domain) {
      cookieText += `; domain=${domain}`;
    }
    if (secure) {
      cookieText += '; secure';
    }
    document.cookie = cookieText;
  }
  static unset (name, path, domain, secure) {
    CookieUtil.set (name, '', new Date (0), path, domain, secure);
  }
}

複製代碼

CookieUtil.get()獲取指定名稱的cookie值

CookieUtil.set()方法用於設置頁面上的 cookie 接收多個參數：cookie 名稱、cookie 值、可 選的 Date 對象（表示什麼時候刪除 cookie）、可選的 URL 路徑、可選的域以及可選的布爾值（表示是否添 加 secure 標誌）。

CookieUtil.unset()方法實現了這些處理。這個方法接收 4 個參數：要刪除 cookie 的名稱、可選的路徑、可選的域和可選的安全標誌。

HTTP-only

還有一種叫做 HTTP-only 的 cookie。HTTP-only 能夠在瀏覽器設置，也能夠在服務器設置，但只能 在服務器上讀取，這是由於 JavaScript 沒法取得這種 cookie 的值。 由於全部 cookie 都會做爲請求頭部由瀏覽器發送給服務器，因此在 cookie 中保存大量信息可能會影 響特定域瀏覽器請求的性能。保存的 cookie 越大，請求完成的時間就越長。即便瀏覽器對 cookie 大小有 限制，最好仍是儘量只經過 cookie 保存必要信息，以免性能問題。 對 cookie 的限制及其特性決定了 cookie 並非存儲大量數據的理想方式。所以，其餘客戶端存儲技 術出現了。

注意 不要在 cookie 中存儲重要或敏感的信息。cookie 數據不是保存在安全的環境中，因 此任何人均可能得到。應該避免把信用卡號或我的地址等信息保存在 cookie 中。

---

以上就是本篇的所有內容了，很是感謝帥哥美女們能看到這裏，若是這個文章寫得還不錯或者對你有一點點幫助，求點贊，求關注，求分享，固然有任何問題能夠在評論討論，我都會積極回答的，再次感謝😁