前端存儲 轉載請註明出處： "前端存儲" 前端存儲是每個前端開發工程師必備的技能。廢話不多說了，直接進入主題。 以下總結以下我接觸過的一些有關前端存儲方面的知識。主要是Cookie與WebStorage。當然，對於這兩種存儲方式的介紹，會與前端安全的問題一起討論 Cookie + Cookie定義 ...
前端存儲
轉載請註明出處：前端存儲
前端存儲是每個前端開發工程師必備的技能。廢話不多說了，直接進入主題。
以下總結以下我接觸過的一些有關前端存儲方面的知識。主要是Cookie與WebStorage。當然，對於這兩種存儲方式的介紹，會與前端安全的問題一起討論
- Cookie
- Cookie定義
- Cookie組成
- Cookie大小
- Cookie用途
- Cookie缺點
- localStorage
- sessionStorage
- cache storage
- application storage
Cookie
Cookie定義：Cookie，中文名稱為'小型文本文件'或'小甜餅'，指某些網站為了辨識用戶身份而存儲在用戶本地終端上的數據（通常經過加密）。同功能變數名稱下瀏覽器中發出的任何一個請求都會帶上Cookie，無論請求什麼資源，Cookie欄位都會作為HTTP請求頭中的一個欄位發往伺服器。服務端響應頭的Set-Cookie欄位可以增加、刪除、修改Cookie。當然，我們也可以通過JS來增加、刪除、修改Cookie。
Cookie組成：Cookie主要由以下幾個欄位組成：
Cookie: [name][value][domain][path][expires][httpOnly][secure]通常通過JS設置Cookie為以下形式。當然，最好的方式是通過一個函數來設置。
document.cookie = 'name=kk; domain=localhost; path=/; expires= Mon Nov 06 2017 01:32:07 GMT+0800 (CST)'name, value: 是Cookie的名稱和值
domain: 設置Cookie時，如果不指定Cookie的值，預設就是本功能變數名稱。如我在本地設置通過Node.js起了伺服器時，Cookie的domain為localhost。預設情況下只能獲取當前域當前路徑下的Cookie。不過，Cookie可以允許獲取父級域的Cookie，但是不允許設置Cookie的domain為子域或者其他外域。比如在www.qq.com設置了某個Cookie，那麼mail.qq.com和video.qq.com是可以共用這個Cookie。
path: 預設情況下，如果不設置Cookie的path時，預設路徑為/。如果需要跨路徑獲取Cookie值，可以使用隱藏的iframe實現，但是必須是同源的。
expires：expires欄位表示Cookie的過期時間。expires欄位的設置與否，會把Cookie分為兩種：本地（持久化）Cookie和記憶體（非持久化）Cookie。在介紹分類的時候再細說。
HttpOnly: 顧名思義，HttpOnly是指在HTTP層面上傳輸的Cookie。當服務端對Cookie消息設置了HttpOnly標誌之後，客戶端腳本就無法通過document.cookie的方式讀寫cookie。能夠讀取意味著可以獲取Cookie，能夠寫入Cookie意味著可以篡改Cookie。因此，對重要的Cookie消息設置HttpOnly能夠有效防禦XSS攻擊獲取Cookie。
Secure: Secure表明設置了Secure欄位的Cookie只能在HTTPS上進行安全數據傳輸。如果請求是HTTP的，就不會帶上這個Cookie，這樣能夠降低Cookie被中間人截獲的風險。
但是，有一個很特別的是設置了Secure欄位的Cookie可以被讀寫。因此，一般情況下，如果只允許HTTPS獲取數據，服務端可以一起配置Secure + HttpOnly欄位，這樣就能夠保證HTTPS傳輸，並且避免了Cookie被讀寫的風險。
Cookie大小：大多數瀏覽器Cookie預設大小為4kb
Cookie分類：根據Cookie中的expires欄位，可以將Cookie分為本地（持久化）Cookie和記憶體（非持久化）Cookie。當expires沒有設置時，實際上就相當於一個記憶體Cookie。瀏覽器關閉之後就消失了。同時，在當前瀏覽器下，打開多個頁面仍然可以訪問到Cookie消息。當expires設置一個未來的時間，那麼就是一個本地Cookie。此時會將Cookie存入到操作系統本地，待過期時間到了才會消失。
因此根據expires值，可以利用Cookie做用戶登錄認證、購物車信息存儲等功能。
Cookie用途：當登錄一個網站時，網站往往會請求用戶輸入用戶名和密碼，並且用戶可以勾選“下次自動登錄”。如果勾選了，那麼下次訪問同一網站時，用戶會發現沒輸入用戶名和密碼就已經登錄了。這正是因為前一次登錄時，伺服器發送了包含登錄憑據（用戶名加密碼的某種加密形式）的Cookie到用戶的硬碟上。第二次登錄時，（如果該Cookie尚未到期）瀏覽器會發送該Cookie，伺服器驗證憑據，於是不必輸入用戶名和密碼就讓用戶登錄了。
在購物場景中，當用戶選購了第一項商品，伺服器在向用戶發送網頁的同時，還發送了一段Cookie，記錄著那項商品的信息。當用戶訪問另一個頁面，瀏覽器會把Cookie發送給伺服器，於是伺服器知道他之前選購了什麼。用戶繼續選購飲料，伺服器就在原來那段Cookie里追加新的商品信息。結帳時，服務端讀取發送來的Cookie就行了。
Cookie缺點：
1.Cookie的大小限制在4kb左右。對於複雜的存儲來說是不夠的
2.Cookie會被附加在每個HTTP請求中，所以會增加HTTP請求大小
3.由於Cookie都是在HTTP請求中明文傳遞的，會有安全性問題（除非使用HTTPS）
localStorage
localStorage是HTML5新增的瀏覽器存儲的方式之一。存儲大小為5MB。localStorage會存儲在本地操作系統的文件中。在數據時效性上，localStorage並不會想cookie那樣可以設置數據的過期時間。也就是說，只要用戶不主動刪除localStorage（通過devtools），localStorage存儲的數據將會永久存在。
註意，localStorage無法跨瀏覽器存在。
這樣介紹一個看，localStorage即比Cookie擁有更大的數據存儲空間，而且數據也是持久化的，不會隨著網頁的關閉而消失，好像可以代替Cookie來做用戶身份驗證。
其實是不能的。我們知道，通常可以通過XSS漏洞來獲取到Cookie，然後用這個Cookie進行身份驗證登錄。但是為了防止通過XSS獲取到Cookie數據，伺服器可以配置HttpOnly來保護Cookie，禁止瀏覽器通過腳本document.cookie獲取到Cookie。而localStorage存儲沒有對XSS攻擊有任何的防禦機制，一旦出現XSS漏洞，那麼存儲在localStorage里的數據就極容易被獲取到。
sessionStorage
sessionStorage存儲大小也為5MB。但是它屬於一種非持久化數據，在網頁關掉時數據就消失了。同時，在瀏覽器未關閉，而重新開一個頁面，也是無法訪問到sessionStorage的。
web SQL
先占位，用過之後再回來填坑
IndexDB
先占位，用過之後再回來填坑
cache storage
先占位，用過之後再回來填坑
application storage
先占位，用過之後再回來填坑
