web缓存和浏览器缓存

• Web缓存
• 浏览器缓存
• cookie
• LocalStorage
  • LocalStorage
  • 方法
  • 属性
  • 事件
  • 示例
• SessionStorage _ 存储容量 _ 生命周期 _ 同源限制 _ 接口 _ 使用场景 _ 示例

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

LocalStorage

LocalStorage 是 HTML5 引入的一个用于浏览器中存储键值对数据的 Web Storage API。以下是 LocalStorage 的一些特点：

• 数据存储: LocalStorage 允许你存储字符串类型的键值对数据。如果需要存储复杂数据类型，可以使用 JSON.stringify() 将数据转换为字符串存储，读取时再使用 JSON.parse() 转换回原始格式。
• 存储容量: 一般情况下，LocalStorage 的存储容量限制为 5MB，但具体大小可能因浏览器而异。
• 生命周期: LocalStorage 的数据没有过期时间，它会一直存储在用户浏览器中，直到被显式删除（例如通过调用 localStorage.removeItem(key)）或者用户清除浏览器数据。
• 同源限制: LocalStorage 数据仅在同源的页面之间共享。不同源的页面不能访问彼此的 LocalStorage 数据。
• 不参与网络传输: LocalStorage 数据不会随着每个 HTTP 请求发送到服务器，因此不会增加网络流量。
• 接口: LocalStorage 提供了简单的 API 接口，如 localStorage.setItem(key, value)、localStorage.getItem(key)、localStorage.removeItem(key) 和 localStorage.clear()。 总结来说，LocalStorage 提供了更大的存储空间，不参与网络传输，适合存储不需要频繁发送到服务器的数据。 LocalStorage 是 Web Storage API 的一部分，它为浏览器提供了一种在客户端存储键值对数据的方法。与 LocalStorage 相关的属性主要是通过 Window 对象的 localStorage 属性来访问的，而这个属性本身并不直接暴露出特定的属性。相反，LocalStorage 提供了一些方法和事件处理程序来与存储的数据交互。以下是 LocalStorage 提供的主要特性：

方法

• localStorage.setItem(key, value)：存储一个键值对。如果键已存在，则更新其值。
• localStorage.getItem(key)：根据提供的键获取对应的值，如果键不存在则返回 null。
• localStorage.removeItem(key)：删除指定的键值对。
• localStorage.clear()：清除所有存储的键值对。
• localStorage.key(index)：获取存储中指定索引位置的键名。

属性

虽然 LocalStorage 本身没有属性，但是可以通过以下方式来获取有关存储的一些信息：

• localStorage.length：返回 LocalStorage 中存储的键值对数量。

事件

LocalStorage 本身不直接提供事件，但是可以通过以下方式来监听存储的变化：

• window 对象上的 storage 事件：当 LocalStorage 或 SessionStorage 中的数据发生变化时（通过 setItem、removeItem、clear 方法），在其他同源窗口或标签页中可以监听到这个事件。

示例

以下是如何使用 LocalStorage 的示例：

// 设置一个键值对
localStorage.setItem('username', 'Alice')
// 获取一个键值对
let username = localStorage.getItem('username')
console.log(username) // 输出: Alice
// 删除一个键值对
localStorage.removeItem('username')
// 清除所有键值对
localStorage.clear()
// 获取存储的键值对数量
let numberOfItems = localStorage.length
console.log(numberOfItems) // 输出当前存储的键值对数量
// 监听 storage 事件
window.addEventListener('storage', function (event) {
  console.log('存储发生变化:', event.key, event.newValue)
})

需要注意的是，LocalStorage 的数据是永久的，除非被显式删除，否则数据会一直保留在用户的浏览器中。此外，LocalStorage 受到同源策略的限制，只能被同一源下的页面访问。

SessionStorage

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

存储容量

• SessionStorage 的存储容量通常限制为 5MB，但这个限制可能会因浏览器而异。

生命周期

• SessionStorage 的数据仅在当前会话（标签页）中有效。当用户关闭会话（关闭标签页或浏览器窗口）时，存储在 SessionStorage 中的数据会被自动清除。
• 如果用户打开了多个相同网站的标签页，每个标签页都有自己的 SessionStorage 实例，它们之间不会共享数据。

同源限制

• 与 LocalStorage 一样，SessionStorage 也受到同源策略的限制。只有相同源的页面才能访问相同的 SessionStorage 数据。

接口

• SessionStorage 提供了简单的 API 接口，包括：
  • sessionStorage.setItem(key, value)：存储数据，key 是存储项的键名，value 是存储项的值。
  • sessionStorage.getItem(key)：获取存储的数据，通过指定的 key。
  • sessionStorage.removeItem(key)：删除指定的存储项。
  • sessionStorage.clear()：清除所有存储的数据。
  • sessionStorage.key(index)：获取指定索引位置的键名。

使用场景

• SessionStorage 非常适合存储仅在当前会话中需要的数据，例如临时数据、会话状态等。
• 它可以用于实现跨多个页面的表单数据保留，用户在填写表单时即使刷新页面也不会丢失数据，直到会话结束。
• SessionStorage 也可以用于存储敏感数据，因为数据不会在会话之外保留。

示例

以下是一个简单的 SessionStorage 使用示例：

// 存储
sessionStorage.setItem('username', 'Alice')
// 获取
let username = sessionStorage.getItem('username')
console.log(username) // 输出: Alice
// 删除
sessionStorage.removeItem('username')
// 清除所有
sessionStorage.clear()

在使用 SessionStorage 时，需要注意的是，由于它的数据在会话结束时会被清除，因此不适合存储需要长期保留的数据。如果需要长期存储数据，应该使用 LocalStorage。