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

• 2019 年 10 月 4 日
• 筆記

iTesting，愛測試，愛分享

最近遇見一個好玩的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區別

• 1. Token放客戶端， Session在服務端。
• 2. Session是空間換時間， Token是時間換空間。
• 3. Token解決了集群時候跨節點訪問問題。

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

WebStorage

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

WebStorage兩個主要目標：

• 1. 提供一種在cookie之外存儲會話數據的路徑。
• 2. 提供一種存儲大量可以跨會話存在的數據的機制。

HTML5的WebStorage提供了兩種API：

• localStorage（本地存儲）
• sessionStorage（會話存儲）

這兩種區別在哪裡？

• 1、生命周期：

localStorage的生命周期是永久的，關閉頁面或瀏覽器之後localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。

sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口後就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。

• 2、存儲大小：

localStorage和sessionStorage的存儲數據大小一般都是：5MB

• 3、存儲位置：

localStorage和sessionStorage都保存在客戶端，不與伺服器進行交互通訊。

• 4、存儲內容類型：

localStorage和sessionStorage只能存儲字元串類型，對於複雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理。

• 5、應用場景：

localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感帳號一次性登錄；

Web Storage帶來的好處：

• 1、減少網路流量：

一旦數據保存在本地之後，就可以避免再向伺服器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和伺服器間不必要的來回傳遞 。

• 2、快速顯示數據：

性能好，從本地讀數據比通過網路從伺服器上獲得數據快得多，本地數據可以及時獲得，再加上網頁本身也可以有快取，因此整個頁面和數據都在本地的話，可以立即顯示 。

• 3、臨時存儲：

很多時候數據只需要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就可以丟棄了，這種情況使用sessionStorage非常方便。

注意：WebStorage這部分內容copy自網路，原創不可考。

– – 時人莫小池中水, 淺處不妨有卧龍 – –

作者： Kevin Cai, 江湖人稱蔡老師。 兩性情感專家，非著名測試開發。 技術路線的堅定支援者，始終相信Nobody can be somebody。