localStorage、sessionStorage、Cookie的

用一張表格形象簡單說明：

web儲存簡介.png

說明：
1：關於cookie存在的跨域問題
當瀏覽器向後臺發起請求時，如果是跨域請求，那麼就不會傳送cookie給後臺，而cookie中有一些資訊，例如JsessionID等身份資訊就不能傳送給後臺，這樣會導致伺服器認為你沒有登入。
2：cookie是如何工作的

1. 首先，我們假設當前域名下還是沒有 Cookie 的
2. 接下來，瀏覽器傳送了一個請求給伺服器（這個請求是還沒帶上 Cookie 的）
3. 伺服器設定 Cookie 併傳送給瀏覽器（當然也可以不設定）
4. 瀏覽器將 Cookie 儲存下來
5. 接下來，以後的每一次請求，都會帶上這些 Cookie，傳送給伺服器
ps:
Cookie 雖然是儲存在瀏覽器，但是通常由伺服器端進行設定，當然客戶端也可以設定

image.png

Cookie 的屬性選項

每個 Cookie 都有一定的屬性，如什麼時候失效，要傳送到哪個域名，哪個路徑等等。在設定任一個 Cookie 時都可以設定相關的這些屬性，當然也可以不設定，這時會使用這些屬性的預設值。

expires

expires 選項用來設定 Cookie 什麼時間內有效，expires 其實是 Cookie 失效日期。
expires 必須是 GMT 格式的時間（可以透過 new Date().toGMTString() 或者 new Date().toUTCString() 來獲得）,所以，Cookie 的失效時刻到了之後，透過 document.cookie 就訪問不到這個 Cookie 了，當然以後傳送請求也不會再帶上這個失效的 Cookie 了。

domain 和 path

name、domain 和 path 可以標識一個唯一的 Cookie。domain 和 path 兩個選項共同決定了 Cookie 何時被瀏覽器自動新增到請求頭部中傳送出去。具體是什麼原理請看 Cookie 的作用域和作用路徑 這個章節。

如果沒有設定這兩個選項，則會使用預設值。domain 的預設值為設定該 Cookie 的網頁所在的域名，path 預設值為設定該 Cookie 的網頁所在的目錄。

secure

secure 選項用來設定 Cookie 只在確保安全的請求中才會傳送。當請求是 HTTPS 或者其他安全協議時，包含 secure 選項的 Cookie 才能被儲存到瀏覽器或者傳送至伺服器。

預設情況下，Cookie 不會帶 secure 選項(即為空)。所以預設情況下，不管是 HTTPS 協議還是 HTTP 協議的請求，Cookie 都會被髮送至服務端。

httpOnly

這個選項用來設定 Cookie 是否能透過 js 去訪問。預設情況下，Cookie 不會帶 httpOnly 選項(即為空)，客戶端是可以透過 js 程式碼去訪問（包括讀取、修改、刪除等）這個 Cookie 的。當 Cookie 帶 httpOnly 選項時，客戶端則無法透過 js 程式碼去訪問（包括讀取、修改、刪除等）這個 Cookie。

設定 Cookie

明確一點：Cookie 可以由服務端設定，也可以由客戶端設定。

服務端設定 Cookie

看回剛剛的那張圖，我們設定了很多個 Cookie。

image.png

• 一個 Set-Cookie 欄位只能設定一個 Cookie，當你要想設定多個 Cookie，需要新增同樣多的 Set-Cookie 欄位

• 服務端可以設定 Cookie 的所有選項：expires、domain、path、secure、HttpOnly

客戶端設定 Cookie

在網頁即客戶端中我們也可以透過 js 程式碼來設定 Cookie。

設定

document.cookie = 'name=value'

可以設定 Cookie 的下列選項：expires、domain、path，各個鍵值對之間都要用 ; 和 空格 隔開

document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';

secure

只有在 https 協議的網頁中，客戶端設定 secure 型別的 Cookie 才能成功

HttpOnly

客戶端中無法設定 HttpOnly 選項

刪除 Cookie

Cookie 的 name、path 和 domain 是唯一標識一個 Cookie 的。我們只要將一個 Cookie 的 max-age 設定為 0，就可以刪除一個 Cookie 了。

let removeCookie = (name, path, domain) => {  document.cookie = `${name}=; path=${path}; domain=${domain}; max-age=0`}

Cookie 的作用域和作用路徑

作用域
在說這個作用域之前，我們先來對域名做一個簡單的瞭解。

子域，是相對父域來說的，指域名中的每一個段。各子域之間用小數點分隔開。放在域名最後的子域稱為最高階子域，或稱為一級域，在它前面的子域稱為二級域。

以下圖為例，news.163.com 和 sports.163.com 是子域，163.com 是父域。

image.png

當 Cookie 的 domain 為 news.163.com，那麼訪問 news.163.com 的時候就會帶上 Cookie；
當 Cookie 的 domain 為 163.com，那麼訪問 news.163.com 和 sports.163.com 就會帶上 Cookie

作用路徑
當 Cookie 的 domain 是相同的情況下，也有是否帶上 Cookie 也有一定的規則。

image.png

在子路徑內可以訪問訪問到父路徑的 Cookie，反過來就不行。

參考文章：

作者：麥殼兒UIandFE2
連結：