面试：localStorage、sessionStorage、cookie 的区别

localStorage、sessionStorage 和 cookie 都是在客户端存储数据的方式，但它们之间有一些区别：

1. 存储容量：

   • localStorage：提供了持久化的本地存储，数据保存在客户端，没有过期时间限制，并且容量通常较大，一般为5MB或更多。
   • sessionStorage：数据仅在当前会话期间有效，关闭标签页或浏览器后会被清除，不同标签页或窗口之间的 sessionStorage 数据不共享，容量通常也较大。
   • cookie：每个 cookie 的大小通常受到限制，一般为几 KB，网站可以设置多个 cookie，但浏览器对每个域名下的 cookie 总大小也有限制。

2. 生命周期：

   • localStorage：数据永久存储，除非用户手动清除或网站代码清除。
   • sessionStorage：数据在当前会话期间有效，关闭标签页或浏览器后会被清除。
   • cookie：可以设置过期时间，可以是会话 cookie（在浏览器关闭后自动删除）或持久性 cookie（在指定过期时间之前一直有效）。

3. 数据共享：

   • localStorage：存储在同源（相同协议、域名和端口）的所有窗口和标签页之间共享。
   • sessionStorage：每个标签页或窗口拥有自己独立的 sessionStorage 数据，不共享。
   • cookie：通过设置 domain 和 path 可以实现不同页面之间的 cookie 共享，但受同源策略限制。

4. 安全性：

   • localStorage 和 sessionStorage：存储在客户端，相对较安全，不会在 HTTP 请求中自动发送到服务器，但仍然可能受到 XSS 攻击。
   • cookie：在 HTTP 请求中自动发送到服务器，存在被窃取的风险，可以设置 HttpOnly 和 Secure 属性增加安全性。

5. API：

   • localStorage 和 sessionStorage：使用相同的 Web Storage API，提供了setItem、getItem、removeItem 等方法来操作数据。
   • cookie：通过 document.cookie 属性进行操作，也可以使用辅助函数如 document.cookie = "name=value; expires=date; path=path; domain=domain; secure" 来设置 cookie。

总体而言，localStorage 和 sessionStorage 提供了更为方便的本地存储方案，适用于大容量数据的存储和持久化需求；而 cookie 主要用于在客户端和服务器之间传递数据，或者存储少量的用户会话信息。