1. Cookie
- 作用：用于在客户端和服务器之间传递少量数据，通常用于会话管理（如用户登录状态、用户偏好设置等）。
- 存储大小：每个Cookie的大小限制通常为4KB左右。
- 有效期：可以设置过期时间，过期后自动删除；如果未设置过期时间，Cookie会在浏览器会话结束后删除（称为会话Cookie）。
- 访问范围：可以通过
HttpOnly 属性将Cookie设为仅服务器端可访问，防止JavaScript访问；通过 Secure 属性确保Cookie仅在HTTPS下传输。 - 发送规则：每次请求都会自动将Cookie随请求头发送到服务器，因此适合存储与服务器通信相关的数据。
- 使用场景：
- 记住用户登录状态。
- 存储用户偏好设置或其他小型会话数据。
2. 本地存储（Local Storage）
- 作用：用于在客户端持久存储大量数据。不同于Cookie，数据不会自动发送到服务器。
- 存储大小：一般为5-10MB。
- 有效期：除非手动清除，否则数据会永久存储在客户端。
- 访问范围：只能在同一域名下的所有页面访问（同源策略）。
- 特点：操作简单，通过
localStorage API直接进行存储和读取。 - 使用场景：
- 存储用户设置、主题选择等需要在多个页面或会话之间共享的数据。
- 缓存静态资源或较大的数据集合。
3. 浏览器缓存（Browser Cache）
- 作用：用于缓存从服务器加载的静态资源（如HTML、CSS、JavaScript、图片等），以减少页面加载时间，提高性能。
- 工作原理：通过HTTP头信息控制缓存行为，例如
Cache-Control、Expires、ETag 等。 - 缓存策略：
- 强缓存：根据
Cache-Control 或 Expires 头来判断，浏览器在缓存期内直接使用缓存的副本，而不向服务器发送请求。 - 协商缓存：浏览器向服务器发送请求，通过
ETag 或 Last-Modified 头来判断缓存资源是否发生变化。如果没有变化，服务器返回304状态码，并指示浏览器继续使用缓存的副本。
- 使用场景：
- 静态资源的缓存，如CSS、JS文件，减少服务器负担。
- 页面数据的临时缓存，减少重复加载的时间。
总结
- Cookie 适合存储少量、需要与服务器交互的会话数据。
- 本地存储 适合持久化存储较大数据，且仅在客户端使用，不与服务器频繁交互。
- 浏览器缓存 用于提高资源加载效率，通过缓存静态资源减少网络请求
