Cookie、localStorage和sessionStorage

　　準備面試的過程當中看到面經裏反覆說起這個問題，寫一篇博客來記錄一下，其中添加了本身的理解，若是有不對還請大佬們賜教

 

Cookie

　　（該部分引用自https://www.jianshu.com/p/6fc9cea6daa2、http://www.javashuo.com/article/p-ndchkvsk-dv.html、http://www.javashuo.com/article/p-urqfeegv-ec.html）

來源（是啥）

　　Cookie的產生緣由是HTTP協議無狀態，也就是說，下次HTTP請求不知道上一次請求了什麼信息。可是例如購物網站等地方，若是咱們把東西添加到購物車時候還在登錄狀態，而結帳的時候，瀏覽器「翻臉」了，不記得咱們是誰了，還要從新登錄，就會形成麻煩。也所以，咱們須要用一個「容器」存儲這些信息，這就有了Cookie，能夠把它當作是「緩存」。

　　Cookie其實是一小段文本信息，當咱們最開始訪問網頁的時候，服務器端會認證咱們的信息，用response發給客戶端一個Cookie，裏面記錄了用戶的狀態。下次咱們再訪問這個服務器的時候，客戶端的瀏覽器會把這個Cookie連同請求地址一同發給服務端，這樣服務端就能夠驗證出用戶的狀態。

機制（產生過程）

　　因爲Cookie記錄了用戶的狀態，這個狀態若是不改變（例如一個固定的用戶名和密碼），實際上只有第一次訪問網站的時候須要獲取用戶狀態。這裏，cookie的設置以及發送包括如下4步：

　　①客戶端發送一個請求到服務器

　　②服務器發送一個HttpResponse響應到客戶端，其中包含Set-Cookie的頭部

　　③客戶端保存cookie，以後向服務器發送請求時，HttpRequest請求中會包含一個Cookie的頭部

　　④服務器返回響應數據

　　其中，瀏覽器提交Cookie給服務端時，只提交name和value，maxAge屬性不可被服務端讀取，只是客戶端用來判斷Cookie是否失效

有效期（expires）

　　過時時間，用maxAge表示，單位爲秒，能夠用getMaxAge()和setMaxAge(int maxAge)來讀寫該屬性

　　正數表示在maxAge後失效，期間關閉瀏覽器/電腦不會致使失效

　　負數表示臨時Cookie，只在瀏覽器當前窗口（會話）或該窗口打開的子窗口有效，關閉窗口就失效

　　0表示Cookie當即失效

域名（domain）

　　Cookie是不能夠跨域名的，並且通常狀況下，同一個一級域名下的兩個二級域名也不能交互使用Cookie，若是想的話，須要設置Cookie的domain屬性爲一整個一級域名

　　例如mail.qq.com和www.qq.com，設置domain爲qq.com便可實現這兩個域名訪問同一個Cookie

路徑（path）

　　即容許訪問Cookie的路徑，設置爲/時，容許全部路徑訪問Cookie

修改/刪除

　　修改只能夠用一個同名的Cookie來覆蓋以前的

　　刪除則用同名的Cookie覆蓋，並把maxAge設置爲0

　　這裏須要注意，用來覆蓋的Cookie必須和以前的Cookie在value和maxAge以外的全部屬性一致（name、path（Cookie在當前哪一個路徑下生成）、domain（生成Cookie的域名）等），不然不能夠實現修改/刪除

大小

　　Cookie大小受到限制，不一樣的瀏覽器下，同一域名的Cookie的個數以及每一個Cookie的長度有限制

　　

缺點

　　cookie會被附加在每一個HTTP請求中，因此無形中增長了流量。

　　因爲在HTTP請求中的cookie是明文傳遞的，因此安全性成問題。（除非用HTTPS)

　　Cookie的大小限制在4KB左右。對於複雜的存儲需求來講是不夠用的

　　簡單總結就是：請求流量大、不安全、容量小不能知足複雜需求

 

localStorage

來源（是啥）

　　HTML5的新增特性中，添加了localStorage，字面意思爲「本地存儲」，其實也就是客戶端存儲一些信息用的，其產生主要是由於Cookie的容量不足，不過其大小也就5M左右

　　localStorage存儲在瀏覽器中，不會隨着關閉瀏覽器而消失

（未完待續）