Web缓存#

Web缓存是一种存储Web页面资源副本的技术，可以加快网页的加载速度，减少延迟，并减少服务器负载。在Web中，主要有以下几种缓存方式：

1. 浏览器缓存：
   • 内存缓存：数据临时存储在内存中，读取速度很快，但一旦关闭浏览器，缓存数据就会消失。
   • 硬盘缓存：数据存储在硬盘上，与内存缓存相比，读取速度较慢，但是数据可以长期存储，即使关闭浏览器也不会消失。
2. 代理服务器缓存：
   • 位于客户端和服务器之间，当客户端请求资源时，代理服务器先检查自己的缓存，如果有，就直接返回给客户端，如果没有，则向服务器请求资源，然后再缓存起来。
3. 反向代理缓存（也叫网关缓存）：
   • 位于服务器端，当客户端请求资源时，反向代理服务器先检查自己的缓存，如果有，就直接返回给客户端，如果没有，则向应用服务器请求资源，然后再缓存起来。
4. CDN缓存：
   • CDN（内容分发网络）缓存是一种分布式缓存，将资源缓存到全球各地的节点上，用户请求资源时，会从最近的节点获取，从而提高访问速度。
5. 数据库缓存：
   • 在数据库层面，对查询结果进行缓存，当有相同的查询请求时，可以直接从缓存中获取结果，提高查询效率。
6. Web应用缓存：
   • 在Web应用层面，对应用生成的页面或者数据结果进行缓存，如使用Redis、Memcached等缓存服务器。
7. 操作系统缓存：
   • 操作系统也会对频繁访问的文件数据进行缓存，以提高访问效率。
8. DNS缓存：
   • DNS解析结果会被缓存，以减少DNS查询的时间。 缓存机制能够有效提高Web性能，减少网络延迟，但是同时也带来了数据一致性的问题，因此需要合理配置缓存策略，确保用户能够获取到最新的数据。

浏览器缓存#

浏览器缓存是浏览器在本地磁盘上存储用户最近请求过的文档副本的一种机制。这种机制可以加快网页的加载速度，减少网络流量，提高用户体验。浏览器缓存主要有以下几种类型：

1. 强缓存（Cache-Control 和 Expires）:
   • Cache-Control：HTTP 头部字段，用于指定所有缓存机制必须遵守的指令。例如，max-age 指令指定资源被缓存的最大时间（秒）。
   • Expires：HTTP 头部字段，指定缓存内容过期的时间点（绝对时间），与 Cache-Control 中的 max-age 相比，Expires 是一个较旧的缓存控制机制。
2. 协商缓存（Last-Modified 和 ETag）:
   • Last-Modified：HTTP 头部字段，表示资源的最后修改时间。浏览器在请求资源时，会发送这个时间戳给服务器，服务器会检查这个时间戳是否与资源的当前修改时间相匹配，如果不匹配，服务器将返回新的资源。
   • ETag（Entity Tag）：HTTP 头部字段，是一个唯一标识符，用于标识资源的版本。浏览器在请求资源时，会发送这个标识符给服务器，服务器会检查这个标识符是否与资源的当前标识符相匹配，如果不匹配，服务器将返回新的资源。
3. 浏览器数据库缓存:
   • WebSQL：一种在浏览器中数据库存储机制，已经被废弃，不再推荐使用。
   • IndexedDB：一种在浏览器中存储大量结构化数据的机制，适用于离线应用。
4. 应用程序缓存（AppCache）:
   • AppCache（Application Cache）：一种离线缓存机制，允许浏览器缓存应用程序的所有资源，使得应用程序可以在没有网络连接的情况下使用。已经被废弃，不再推荐使用。
5. 服务端缓存:
   • CDN（Content Delivery Network）：内容分发网络，通过在全球分布的服务器上缓存内容，提高内容的加载速度。
   • Server-side Cache：服务器端缓存，如 Varnish、Squid 等，用于缓存服务器的响应，减少服务器的负载。
6. 本地存储:
   • LocalStorage：一种允许在浏览器中存储键值对数据的机制，数据在会话之间持久存在。
   • SessionStorage：与 LocalStorage 类似，但是数据只在会话期间存在，当会话结束时数据会被清除。
7. Cookie:
   • Cookie：小型文本文件，由服务器发送到用户的浏览器，并存储在本地。每次浏览器请求同一服务器时，都会发送这个 Cookie。 这些缓存机制可以单独使用，也可以组合使用，以实现最佳的缓存效果。在实际应用中，开发者需要根据具体情况选择合适的缓存策略。

cookie#

Cookie 是一种在 Web 开发中广泛使用的旧技术，用于在客户端存储少量数据。以下是 Cookie 的一些特点：

• 数据存储: Cookie 用于存储少量文本数据，通常不超过 4KB。
• 生命周期: Cookie 可以设置过期时间（通过 Expires 或 Max-Age 属性），过了这个时间，Cookie 就会自动被浏览器删除。如果没有设置过期时间，Cookie 会在浏览器会话结束时被删除，这种 Cookie 称为会话 Cookie。
• 同源限制: Cookie 通常只允许在同源的网页之间共享，但可以通过设置 Domain 和 Path 属性来放宽这个限制。
• 参与网络传输: 每次请求同一域下的资源时，浏览器都会在请求头中包含 Cookie 信息，这可能会增加网络流量。
• 属性: Cookie 有多个属性，如 Name、Value、Domain、Path、Expires/Max-Age、Secure、HttpOnly 和 SameSite，用于控制 Cookie 的行为、范围和安全性。
• 接口: Cookie 通常通过服务器设置（在 HTTP 响应头中通过 Set-Cookie 字段），也可以通过 JavaScript 的 document.cookie 属性进行操作，但接口比较原始。

以下是一些常见的 Cookie 属性：

1. Name (必需): Cookie 的名称，用于在请求头中识别该 Cookie。
2. Value (必需): Cookie 的值，存储在 Cookie 中的实际数据。
3. Domain: 指定 Cookie 可以被发送到哪些域。如果没有设置，默认为创建 Cookie 的页面域。
4. Path: 指定 Cookie 在哪些路径下有效。如果没有设置，默认为创建 Cookie 的页面路径。
5. Expires/Max-Age: 指定 Cookie 的过期时间。Expires 设置一个绝对时间点（GMT 格式），而 Max-Age 设置从当前时间开始 Cookie 存活的时间（秒）。如果没有设置这两个属性，Cookie 会在浏览器会话结束时被删除（会话 Cookie）。
6. Secure: 当设置为 true 时，Cookie 只会在 HTTPS 连接中被发送到服务器。
7. HttpOnly: 当设置为 true 时，Cookie 只能通过 HTTP 请求头传输，不能通过 JavaScript 访问，这样可以防止跨站脚本攻击（XSS）。
8. SameSite: 限制第三方 Cookie 的发送，可以设置为 Strict、Lax 或 None。这个属性用于控制跨站请求时是否发送 Cookie。
   • Strict：Cookie 只会在同一站点的请求中发送，即使是顶级导航也不会发送。
   • Lax：Cookie 在顶级导航和 GET 请求中发送，但在跨站 POST 请求中不会发送。
   • None：Cookie 可以在任何上下文中发送，包括跨站请求。但是，为了设置 None，必须同时设置 Secure 属性。
9. Priority (实验性): 指定 Cookie 的优先级，可以设置为 High、Low 或 Medium。当磁盘空间不足时，浏览器可能会根据优先级来决定保留哪些 Cookie。 这些属性可以在服务器端设置 Cookie 时指定，也可以通过 JavaScript 的 document.cookie API 在客户端设置。需要注意的是，由于安全和隐私的考虑，现代浏览器对 Cookie 的使用有严格的限制和规定。

LocalStorage#

LocalStorage 和 Cookie 都是网页浏览器中用于存储数据的机制，但它们在用途、存储容量、有效期和传输方式等方面有所不同。

1
// 设置一个键值对
2
localStorage.setItem('username', 'Alice')
3
// 获取一个键值对
4
let username = localStorage.getItem('username')
5
console.log(username) // 输出: Alice
6
// 删除一个键值对
7
localStorage.removeItem('username')
8
// 清除所有键值对
9
localStorage.clear()
10
// 获取存储的键值对数量
11
let numberOfItems = localStorage.length
12
console.log(numberOfItems) // 输出当前存储的键值对数量
13
// 监听 storage 事件
14
window.addEventListener('storage', function (event) {
15
  console.log('存储发生变化:', event.key, event.newValue)
16
})

SessionStorage#

SessionStorage 是 HTML5 引入的 Web Storage API 的一部分，与 LocalStorage 类似，用于在浏览器中存储键值对数据。然而，与 LocalStorage 不同的是，SessionStorage 的数据生命周期限定在当前会话中。以下是 SessionStorage 的一些特点：

1
// 存储
2
sessionStorage.setItem('username', 'Alice')
3
// 获取
4
let username = sessionStorage.getItem('username')
5
console.log(username) // 输出: Alice
6
// 删除
7
sessionStorage.removeItem('username')
8
// 清除所有
9
sessionStorage.clear()