请描述 cookie, sessionStorage 和 localStorage 的差异

若你正在准备海外前端面试，可以阅读本篇的英文版《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 因为会被自动夹带在 HTTP 请求中，传送给服务器，因此需要考量到安全性的问题。

Secure：加上 Secure 可以确保只有在以加密的请求透过 HTTPS 协议时，才会传送给服务器。
HttpOnly：加上HttpOnly，可以避免 JavaScript 的Document.cookie方法取得HttpOnly cookies，HttpOnly cookies 只会被传送到服务器，此方法可以避免跨站脚本攻击(XSS )。

三者的异同

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