浏览器

http 缓存

强缓存和协商缓存是 HTTP 缓存的两种主要方式，它们可以通过设置 HTTP 响应头来实现。以下是它们的设置方法：

1. 强缓存：

   强缓存是通过设置响应头中的 Cache-Control 和 Expires 字段来实现的。这些字段告诉浏览器在多长时间内可以直接从本地缓存中获取资源，而不需要向服务器发送请求。

   • 使用 Cache-Control 字段来指定缓存策略。常见的取值有：
     • public：表示响应可以被任何缓存（包括客户端和代理服务器）缓存。
     • private：表示响应只能被客户端缓存，而不被代理服务器缓存。
     • max-age=<seconds>：表示缓存资源的最大有效期，单位为秒。
     • no-cache：表示需要重新向服务器验证资源的有效性，但仍然可以使用缓存。
     • no-store：表示不缓存该响应的任何部分。
   • 使用 Expires 字段来指定资源的过期时间。它是一个 HTTP 日期，表示资源的到期时间。

   示例：

   httpCopy codeCache-Control: max-age=3600
   Expires: Wed, 23 Mar 2022 10:00:00 GMT

   这样设置之后，浏览器在缓存资源的有效期内，可以直接从本地缓存中获取资源，而不需要向服务器发送请求。

2. 协商缓存：

   协商缓存是通过设置响应头中的 ETag 和 Last-Modified 字段来实现的。这些字段告诉浏览器如何验证缓存是否仍然有效。

   • 使用 ETag 字段来指定资源的标识符（通常是资源的哈希值）。服务器会根据资源的内容生成一个唯一的标识符，用于验证资源是否发生了变化。
   • 使用 Last-Modified 字段来指定资源的最后修改时间。它是一个 HTTP 日期，表示资源的最后修改时间。

   当浏览器再次请求资源时，会将上一次获取到的 ETag 或 Last-Modified 值发送给服务器，服务器根据这些值来判断资源是否发生了变化。如果资源未发生变化，则返回 304 Not Modified 响应，告诉浏览器可以继续使用缓存中的资源，而不需要重新下载。

   示例：

   httpCopy codeETag: "686897696a7c876b7e"
   Last-Modified: Wed, 23 Mar 2022 09:00:00 GMT

   这样设置之后，浏览器会将 ETag 或 Last-Modified 值发送给服务器，服务器根据这些值来验证资源是否发生了变化，从而决定是否返回新的资源或者告知浏览器继续使用缓存。

通过设置合适的缓存头，可以优化 Web 应用的性能，提高页面加载速度，并减少网络流量的消耗。

浏览器缓存

浏览器存储方式通常指的是浏览器提供的客户端存储机制，用于在用户本地存储数据，以便在浏览器关闭后或页面重新加载时仍然可以访问这些数据。常见的浏览器存储方式包括：

1. Cookies（Cookie）： Cookies 是一种客户端存储机制，用于存储少量的文本数据，并在浏览器和服务器之间传递。Cookies 可以通过 JavaScript 的 document.cookie 接口来读取和写入。它们通常用于存储用户身份验证信息、会话状态、偏好设置等。
2. Web Storage：
   • LocalStorage： LocalStorage 是 HTML5 提供的一种客户端存储机制，用于存储键值对数据。LocalStorage 存储的数据在浏览器关闭后仍然保留，直到用户手动清除。
   • SessionStorage： SessionStorage 也是 HTML5 提供的一种客户端存储机制，与 LocalStorage 类似，但它存储的数据在会话结束（即浏览器关闭或标签页关闭）后会被清除。
3. IndexedDB： IndexedDB 是 HTML5 提供的一种客户端存储机制，用于存储大量结构化数据。IndexedDB 是一种 NoSQL 数据库，支持事务操作和索引查询，并提供了更强大和灵活的数据存储和查询功能。
4. Cache Storage： Cache Storage 是浏览器提供的一种客户端缓存机制，用于缓存网络请求和响应。它通常用于存储离线应用程序的资源文件，如 HTML、CSS、JavaScript、图像等，以便在离线时仍然可以访问这些资源。

这些浏览器存储方式各有特点，可以根据具体的需求和场景选择合适的存储方式。例如，Cookies 适用于存储小容量、频繁访问的数据，而 IndexedDB 则适用于存储大容量、结构化的数据。