19. Cookie/ LocalStorage/ SessionStorage 的差别

Cookie

HTTP cookie 简称为Cookie，当使用者浏览网页时，web server会建立cookie，并将资料储存在浏览器。

过去时常用於储存购物车的资料，或者是纪录使用者的网页活动(点击按钮、登入、追踪浏览的页面等)。

Cookies are used to personalize a user’s web experience with a website. It may contain the user’s preferences or inputs when accessing that website. A user can customize their web browser to accept, reject, or delete cookies.

Cookie的类型分为许多种(详细可以参阅HTTP cookie - Wikipedia):

• Session cookie: 被储存在浏览器的资料仅供暂时储存，当浏览器关闭时就被清空。
• Persistent cookie: 被存在硬碟的并永久储存，手动删除时清空。

而常见的还有，身分验证cookie( Authentication cookies)被用於确认使用者的登入状态，或是追踪cookie(Tracking cookies)会追踪使用者的活动(也就是我们在浏览某些网页时，会跳出的"第三方追踪cookie"，因为有隐私性问题，所以会询问使用者是否允许。)

性质

• 分为暂时储存或永久储存，可设定资料失效的时间。
• 请求时会被递交给server。
• 容量约 4kb。

每当进行HTTP请求，Cookie就会被夹带在Header一起被递交(明文传输)，因此会被占据流量，也较容易有安全性的问题。(网路攻击可以参阅这篇文章: 身为 Web 工程师，你一定要知道的几个 Web 资讯安全议题)

由於Cookie容量小、占网路流量、资料安全性低的缺陷，後来Web Storage API 提供了其他可以应用的储存方式。

SessionStorage

Web Storage API 使提供了两种储存方式: SessionStorage & LocalStorage，浏览器能够以key/value字组来储存资料。

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

性质

• 资料仅供暂时储存，每浏览器或分页关闭时就被清空。
• 资料不会被递交给server。
• 容量至多5MB(大於cookie)。

SessionStorage可用於较长的表单输入，将表单拆成子页，并在填完表单後一并送出，以提升用户体验。

LocalStorage

LocalStorage与SessionStorage类似，差别是LocalStorage容量较大，且被储存在LocalStorage除非主动删除资料，不然会永久存在。

性质

• 资料仅供暂时储存，每浏览器或分页关闭时就被清空。
• 资料不会被递交给server。
• 容量至多5MB(SessionStorage)。

在用途上，LocalStorage替代了Cookie储存购物车资讯的工作。

比较

【如内文有误还请不吝指教>< 并感谢阅览至此的各位:D 】

参考资料

• Cookie - 维基百科，自由的百科全书
• [JavaScript] Cookie、LocalStorage、SessionStorage 差异 | by Peggy Chan | Medium
• Document.cookie - Web APIs | MDN
• Web Storage API - Web APIs | MDN

---正文结束---