---
# System prepended metadata

title: Cookie&Session，LocalStorage，SessionStorage

---

# Cookie&Session，LocalStorage，SessionStorage
## Cookie&Session 
HTTP本身為一種無狀態的通訊協定，意思是無法記錄網路上的行為，當網頁或瀏覽器被關閉時，所有的資料將會被清除，這將會造成使用者的不便，像是需要重新登入或是重新輸入已經輸入過的資料。

Cookie與Session的組合便可以解決這問題。

在驗證成功後，伺服器可以將帳號密碼或是驗證識別存入用戶端，
在每次用戶端發送請求時，伺服器都會先檢查是否有Cookie存在，
但也因為Cookie被儲存在用戶端所以也很容易被竄改且如果Cookie的數據量變大也會很直接影響到傳輸效率，所以也會常搭配Session做使用，Session的數據是保留在伺服器端因此便可降低被竄改風險，如果用已登入驗證為例，只在Cookie中存放某段識別碼(Session id)當送出請求時伺服器核對識別碼後依照識別碼找出相對應的使用者資料。

|        | 生命週期                               | 大小 | 與Server溝通                          |
| ------ | -------------------------------------- | ---- | ------------------------------------- |
| Cookie | 可設定失效時間, 預設為關閉瀏覽器後失效 | 4K   | 每次都會被攜帶在HTTP中,大太會影響效率 |

## LocalStorage&SessionStorage 
這兩種方式為在用戶端存資料的方式，優點是儲存空間都比Cookie大，兩者最大差別是生命週期，LocalStorage除非主動刪除否則不會消失,
SessionStorage則是在關閉瀏覽器後被清除，所以應用的場景也不太一樣像是LocalStorage可以管理購物車，或是之前實做過的twitter用來Token，SessionStorage則常用於紀錄複雜的表單。


|     | 生命週期 | 大小 | 與Server溝通 |
| --- | -------- | -------- | -------- |
| LocalStorage    |    除非被清除否則永遠存在      |    5M      |     僅保存在瀏覽器     |
| SessionStorage    | 關閉頁面或瀏覽器後及消除     |  5M     | 僅保存在瀏覽器     |



