Cookie, Session, Token,WebStorage你懂多少?

最近遇見一個好玩的bug, 現象是頁面刷新白屏,RootCause是Header裡放的cookie太多了, 大小超出了4kb的限制．解決方法很簡單，拆出一部分放到LocalStorage．問題解決了，但是個人覺得很有意思，平常司空見慣的，覺得＂假大空不接地氣＂的概念，其實都真真切切的在項目中體現了，只不過我們熟生輕視，看不見而已．遂記錄本文．
面試的時候經常喜歡問一個問題，HTTP協議是有狀態的還是無狀態的？很多同學都不知道，或者簡單背一個答案，曰無狀態．再問，那麼HTTP協議如何保持狀態？只有一小部分同學能答出來要用cookie和session.再問,有了cookie為什麼還要session？更少一部分人能答出來安全。再問，不要cookie行不行？能答出URL重寫的已經不錯了。對於高級的測試，再繼續深入，session保存在伺服器內存中，隨著用戶的增多，伺服器撐不住了怎麼辦？假設我使用了集群服務怎麼辦？這個時候聰明點的就會答sesion sticky， 或者使用Memcached集中所有session id了。但這也帶來另外一個問題，session 伺服器掛了怎麼辦？再弄個集群，有點傻吧，自然的，Token就被帶出來了。然後再問Token一般怎麼生成的啊？伺服器生成，把user id+時間+私密籤名用Base64加密生成，自己保存一份（不放內存放DB， 也可以不保存，那麼收到客戶端id就用加密算法再算一次生成token來對比）， 發給客戶端一份。能回答到這裡的已經可以了。接著再順便問一句，token裡能不能保存敏感信息啊？為什麼？（Base64是加密嗎？），什麼是JWTtoken啊？token組成裡的私密籤名，是用什麼加密的啊，順便就把公鑰私鑰給理清楚了。對稱算法，非對稱算法也給考察了。如果有人答到這裡，你還對他不放心的話，再問一句你聽過iTesting嗎？回答聽過的你就收了吧，看我公號的人技術都不會太差：）。HTTP和HTTPS的核心區別是什麼？能答出TCP請求並說出區別是SSL協議的你就收了吧。像什麼get和post的區別，生成一個TCP請求包還是2個就不必要再糾結了， 能研究到這裡的，測試肯定也能幹好。上面說了一堆，看出來了嗎？一個問題考察多個層面並且都有聯繫，平常沒點積累是不行的，我的文章要常常看啊。

cookie 和session的區別

1. cookie放在客戶端的瀏覽器上，session放伺服器上。

2. Session生成的Session id是在cookie裡保存的，cookie被禁止後可以通過URL重寫來繼續使用session

3. cookie不是安全，存放在本地的COOKIE可能被獲取並進行COOKIE欺騙。

4. session會給伺服器帶來壓力，考慮到伺服器性能，應當使用COOKIE。

5. cookie只能保存字符串類型，以文本的方式。session通過類似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象)

6.  單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie， Session大小沒限制。

Token 和Session區別

Cookie有限制，每次請求服務端必須帶上，還有大小不能超過4kb，如果想突破這個限制怎麼辦？

WebStorage

為克服由cookie所帶來的一些限制，當數據無需發回伺服器時使用。

WebStorage兩個主要目標：

HTML5的WebStorage提供了兩種API：

localStorage（本地存儲）

sessionStorage（會話存儲）

這兩種區別在哪裡？

localStorage的生命周期是永久的，關閉頁面或瀏覽器之後localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口後就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。localStorage和sessionStorage的存儲數據大小一般都是：5MBlocalStorage和sessionStorage都保存在客戶端，不與伺服器進行交互通信。localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理。localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感帳號一次性登錄；

Web Storage帶來的好處： 

一旦數據保存在本地之後，就可以避免再向伺服器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和伺服器間不必要的來回傳遞 。性能好，從本地讀數據比通過網絡從伺服器上獲得數據快得多，本地數據可以及時獲得，再加上網頁本身也可以有緩存，因此整個頁面和數據都在本地的話，可以立即顯示 。很多時候數據只需要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就可以丟棄了，這種情況使用sessionStorage非常方便。注意：WebStorage這部分內容copy自網絡，原創不可考。

眾籌請我喝杯咖啡吧