前端之路——WebStorage和Cookie
概述
本文基於此主要討論了瀏覽器中的儲存機制。
最初，web應用需要儲存的是使用者的會話狀態、個性化資訊。但是因為http協議是無狀態的，因此這種需求是用Cookies來實現的。Cookies的特點是由服務端生成，通過響應傳送到瀏覽器，瀏覽器會把cookies儲存在本地，接下來的每次請求，都會自動帶上Cookies到伺服器。後來H5提供了新的本地儲存API：WebStorage。WebStorage可以理解成Cookies的增強版。
Cookies的建立
當服務端收到請求之後，可以在響應頭新增Set-Cookie選項。
Set-Cookie的值可以是以下名值對形式：
<cookie-name>=<cookie-value>。
除了自定義的名值對之外，cookie還有如下可選的特殊指令：
Expires=<date>：cookie 的最長有效時間
Max-Age=<non-zero-digit>：在 cookie 失效之前需要經過的秒數
Domain=<domain-value>：指定 cookie 可以送達的主機名
Path=<path-value>：指定一個 URL 路徑，這個路徑必須出現在要請求的資源的路徑中才可以傳送 Cookie 首部
Secure：一個帶有安全屬性的 cookie 只有在請求使用SSL和HTTPS協議的時候才會被髮送到伺服器
HttpOnly：設定了 HttpOnly 屬性的 cookie 不能使用 JavaScript 經由Document.cookie 屬性、XMLHttpRequest和 Request APIs 進行訪問，以防範跨站指令碼攻擊（XSS）
SameSite=<value>: 用於定義cookie如何跨域傳送, 可選值是Strict或Lax，預設值是Strict。
Cookies一旦設定後，就會在HTTP請求頭的 Cookie 中，一起傳送到服務端。即響應中的頭部是 Set-Cookie，請求中的頭部是 Cookie。
Set-Cookie的特殊指令的說明
- 不指定Expires和Max-Age的cookie是會話期cookie，會在瀏覽器關閉的時候自動刪除。
需要注意的是，部分瀏覽器提供了會話恢復功能，這種情況下即使關閉了瀏覽器，會話期Cookie也會被保留。
- 指定了Expires和Max-Age的cookie是永續性cookie，會在到達失效時間或最大存活時間後失效。
需要注意的是，這裡的時間是以客戶端的時間相關。
-
Domain和Path標識定義了Cookie的作用域：即Cookie應該傳送給哪些URL。
-
Secure和HttpOnly則是著重於安全方面。
瀏覽器對Cookie的限制
-
cookie的最大可以為4KB。
-
每個域名下面最多50個cookie。
-
總共最多3000個cookie。
Cookie存在的問題
-
通過監聽未加密的網路竊取cookies。可以通過使用https協議以及為cookies設定Secure屬性來避免。
-
XSS(Cross-site scripting)跨站指令碼。
反射型：例如攻擊者向搜尋框中輸入html標籤
<img src='null' onerror='alert(document.cookie)' />
搜尋結果頁面如果直接顯示使用者輸入的內容，就可能會發生反射型攻擊。即指令碼在請求中。
持久型：攻擊者向伺服器傳送一段指令碼，儲存到資料庫或者檔案中。當用戶向伺服器請求資料的時候，有可能返回的響應中就包括攻擊者之前提交的指令碼，瀏覽器執行後就會發生持久型攻擊。即指令碼被儲存在服務端。
DOM型：web應用本身存在可以執行使用者輸入指令碼的漏洞，比如js的eval()函式。攻擊者可以輸入惡意指令碼，瀏覽器會執行這段指令碼，從而引發DOM型攻擊。通過設定HttpOnly可以防止cookie被js訪問，從而避免攻擊者劫持使用者的cookies。
-
CSRF(Cross-site request forgery)跨站請求偽造。
攻擊通過在授權使用者訪問的頁面中包含連結或者指令碼的方式工作。讓已經登入的使用者，把使用者匯入到第三方網站後，利用
使用者的cookies向源網站發起請求。
WebStorage
WebStorage的作用是在於儲存客戶端資料在瀏覽器裡，有兩種型別的WebStorage，localStorage可以對應到持久型Cookie，
sessionStorage可以對應到會話型Cookie。
WebStorage與Cookie的不同
- WebStorage主要是用來在客戶端儲存資料，不一定要傳輸到服務端。Cookie則會在請求頭中一起傳送到服務端。
- WebStorage的大小不同的瀏覽器設定不一樣，但是都遠大於Cookie的4KB。
- WebStorage只能由客戶端指令碼訪問，不能在服務端生成。
WebStorage的使用方法
WebStorage通過在window物件上暴露了兩個例項來訪問，即
localStorage本地儲存和sessionStorage會話儲存。二者的區別主要上是作用範圍和生命週期。
localStorage中的資料在瀏覽器視窗關閉後仍然會儲存在瀏覽器中，並且可以在同源域下、不同的瀏覽器視窗都可以訪問到。
sessionStorage中的資料在瀏覽器視窗關閉後就會清除了，不同的瀏覽器視窗中是無法互相訪問sessionStorage中的資料。
注意：WebStorage中的值必須是字串，如果不是字串型別，就會自動型別轉換成字串。