這篇來學習將資料存在前端（瀏覽器）的幾個方法，以及標題中三者的差異。

Cookie

Cookie 是瀏覽器存資料的地方，也是一個小型的文字檔，大小限制在 4KB 左右，且一個 domain 只能存 20 個 cookie。特性是每次發出請求（request）都會攜帶，當然也具有安全性問題，如果儲存過多資料則會導致效能問題。

Cookie 的種類分為多種，包括 Persistent cookie、Http-only cookie、Persistent cookie 等等，詳細請參考 HTTP cookie。

為了解決安全性等問題，Web Storage API 後來提供了其他方法供我們使用：

LocalStorage

localStorage 儲存的資料是永久性的，頁面關閉也不會消失，除非主動將其刪除，大小方面約 5 MB，與 sessionStorage 相同。

LocalStorage 提供的方法有：

• 設置：localStorage.setItem('key', 'value')
• 取得：localStorage.getItem('key')
• 移除單一：localStorage.removeItem('key')
• 移除全部：localStorage.clear()

上面的方法都是 key & value 的組合，範例可以參考 MDN 的文章。

SessionStorage

sessionStorage 雖然儲存的檔案大小跟 LocalStorage 一樣，不過一旦關閉視窗後，sessionStorage 內的所有資料都會被清除。

而 SessionStorage 與 LocalStorage 同樣都不會在發出請求時帶上，這點跟 cookie 相反。

三者差異

參考資料

• Window.localStorage
• [JavaScript] Cookie、LocalStorage、SessionStorage 差異
• 19. Cookie/ LocalStorage/ SessionStorage 的差別