浏览器缓存：Cookie、LocalStorage、SessionStorage的区别与应用

前言

浏览器缓存是一种在本地保存资源副本，以便在下次请求时快速获取的技术。浏览器缓存可以提高网站的性能，减少服务器的负载，节省流量和时间。

浏览器缓存的方式主要有三种：Cookie，LocalStorage和SessionStorage。它们的区别和应用如下：

Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据。它的大小限制为 4KB 左右。

主要用途：

• 保存登录信息，比如你登录某个网站可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
• 保存上次登录的时间等信息。
• 保存上次查看的页面。
• 浏览计数。

注意点：

• Cookie 的数据会自动的传递到服务器，服务器端也可以写 Cookie 到客户端。
• Cookie 可以设置过期时间，如果不设置，那么关闭浏览器后 Cookie 就会被删除。
• Cookie 可以指定域名和路径，来限制 Cookie 的发送范围。
• Cookie 可以设置 Secure 和 HttpOnly 属性，来增加 Cookie 的安全性。Secure 表示只在 HTTPS 请求中发送，HttpOnly 表示不能被 JavaScript 访问。

缺点：

• 大小受限，不能存储大量的数据。
• 用户可以操作（禁用或删除）Cookie，使功能受限。
• 安全性较低，容易被截获或伪造。
• 每次请求都要发送 Cookie 给服务器，浪费带宽。

LocalStorage

LocalStorage 是 HTML5 新增的一种本地存储技术，它可以在浏览器中存储键值对的数据。它的大小限制为 5MB 左右。

主要用途：

• 存储用户的偏好设置，如主题，语言等。
• 存储用户的购物车信息，如商品列表，数量等。
• 存储用户的历史记录，如浏览过的商品，搜索过的关键词等。
• 存储一些不经常变化的数据，如城市列表，商品分类等。

注意点：

• LocalStorage 的数据不会传送到服务器，只在本地保存。
• LocalStorage 的数据没有过期时间，除非主动删除，否则永久存在。
• LocalStorage 的数据只能存储字符串类型，对于复杂的对象可以使用 JSON.stringify 和 JSON.parse 来处理。
• LocalStorage 的数据是以域名为单位进行隔离的，不同的域名不能相互访问。

缺点

• 存储空间有限，不能存储大量的数据。
• 不支持数据的增删改查操作，只能通过键值对的方式存取。
• 不支持数据的同步更新，如果多个标签页对同一个数据进行修改，可能会造成数据的覆盖或丢失。

SessionStorage

SessionStorage 也是 HTML5 新增的一种本地存储技术，它与 LocalStorage 的区别在于，它的数据只在当前会话下有效，也就是说，当用户关闭浏览器或标签页后，数据就会被删除。它的大小限制也是 5MB 左右。

它的主要用途有：

• 存储用户的登录状态，如用户名，token 等。
• 存储用户的临时数据，如表单填写的内容，验证码等。
• 存储用户的浏览进度，如视频播放的位置，文章阅读的位置等。

注意点：

• SessionStorage 的数据不会传送到服务器，只在本地保存。
• SessionStorage 的数据是以窗口或标签页为单位进行隔离的，不同的窗口或标签页不能相互访问。
• SessionStorage 的数据也只能存储字符串类型，对于复杂的对象也可以使用 JSON.stringify 和 JSON.parse 来处理。

缺点：

• 存储空间有限，不能存储大量的数据。
• 不支持数据的增删改查操作，只能通过键值对的方式存取。
• 不支持数据的同步更新，如果多个标签页对同一个数据进行修改，可能会造成数据的覆盖或丢失。