请描述 cookie, sessionStorage 和 localStorage 的差异

2023年1月20日

💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

若你正在准备海外前端面试,可以阅读本篇的英文版《What is the difference between cookie, sessionStorage and localStorage?》

在开发网页时,我们有时候会需要将资料储存在客户端 (浏览器)。在存资料到浏览器的方式中,最常使用到的就是 cookie、localStorage 和 sessionStorage,这三者都可以拿来储存资料,但有不同的适用情境和限制。而三者的异同,也是前端面试时常会考的。以下我们将会从使用方式、使用场景、生命周期、存放空间的大小,以及 HTTP 请求等多个角度,来分析它们的异同。

三者的异同

使用方式

cookie:第一次用户端浏览器在发送请求后,服务器端会在回应的标头中,添加一个Set-Cookie 的选项并将 cookie 放入到回应中,送回用户浏览器端后,会储存在用户端本地。此外 cookie 会在用户浏览器下一次发送请求时,一同被携带并发送回服务器上。

localStorage、sessionStorage:这两者都是使用键与值(key-value) 的方式储存在用户本地端。

// localStorage 存入数据
localStorage.setItem("memberName", "John");

// localStorage 读取数据
localStorage.getItem("memberName");

// sessionStorage 存入数据
sessionStorage.setItem("memberName", "John");

// sessionStorage 读取数据
sessionStorage.getItem("memberName");

使用场景

cookie 因为会被自动夹带在 HTTP 请求中,所以常使用在需要辨识用户的场景。 localStorage 因为容量比 cookie 大得多且不会容易被删除,使用情景也相对来得广,例如:跨页面的数据传递、需要长期保存的资料。 sessionStorage 则是因为生命周期较短,适用于单次使用会需要用到的数据保存,例如:表单资料保存。

生命周期

cookie:可以透过 Expires 标明失效时间、或 Max-Age 标明有效时间长度,没有设置的话,预设是关闭浏览器之后失效。

localStorage:除非在用户端被手动删除,或是代码清除,否则将永久保存。

sessionStorage:在每次关闭该页面、或是关闭浏览器后就会自动被清除。

存放的数据大小

cookie:4KB 左右。

localStorage、sessionStorage:5MB~10MB 左右(依不同浏览器不一样)()。

HTTP 请求

cookie:每次请求时都会被夹带在 HTTP header 中,所以如果使用过多可能会带来性能问题。

localStorage、sessionStorage:仅会存在客户的浏览器端,不参与请求的过程。

延伸讨论:如何增加 cookie 的安全性?

cookie 因为会被自动夹带在 HTTP 请求中,传送给服务器,因此需要考量到安全性的问题。

  • Secure:加上 Secure 可以确保只有在以加密的请求透过 HTTPS 协议时,才会传送给服务器。
  • HttpOnly:加上HttpOnly, 可以避免 JavaScript 的Document.cookie方法取得HttpOnly cookiesHttpOnly cookies 只会被传送到服务器,此方法可以避免跨站脚本攻击(XSS )。
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們