> For the complete documentation index, see [llms.txt](https://jack1in.gitbook.io/font-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack1in.gitbook.io/font-end/1.-web/1.7-cookie-localstorage-sessionstorage.md).

# 1.7 Cookie、LocalStorage、SessionStorage

## Cookie

HTTP cookie 為伺服器傳送給使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並在下一次請求回傳 cookie 至相同的伺服器。Cookie 通常被用來保持使用者的登入狀態 

* 大小約 4kb
* 每次 request 時都會帶上

### LocalStorage / SessionStorage <a href="#b87f" id="b87f"></a>

是HTML5提供兩種在客戶端儲存資料的方法，彌補了cookie儲存量小、不適用於大量資料本地儲存的問題。\
從字面上的意思就可以看出，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地； 不管是sessionStorage，還是localStorage，可使用的API都相同。

* 都是使用 key / value pair 的方式 給值或取值
* 大小預設有 5mb
* 每次 request 不會帶上

#### LocalStorage

> 不會過期，除非手動清除

#### SessionStorage

> 每次分頁或瀏覽器關掉後就會清除

生命周期只存在瀏覽囂的 ***單一分頁*** ，也就是 ***另開新分頁的話*** ，又是一個 ***新的sessionStorage*** ，預設無逾期時間，除非關閉該分頁、關閉瀏覽器等，sessionStorage就會消失。

## 三者差異 <a href="#id-42c0" id="id-42c0"></a>

![](/files/-LmDFNYLPJIpYeaI9i5t)

## 應用場景 <a href="#id-5b24" id="id-5b24"></a>

* **Cookie**

比較常用的場景就是判斷用戶是否登錄 針對登錄過的用戶，服務器端會在他登錄時往Cookie 插入一段加密過的辨識碼，下次只要讀取這個值就可以判斷用戶是否登錄。

* **LocalStorage**

而另一方面 localStorage 代替了 Cookie 管理購物車的工作，同時也能勝任其他工作。比如說HTML遊戲通常會產生一些數據，localStorage 也很適合使用。

* **SessionStorage**

如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶。這時候 sessionStorage 就可以發揮出效用。