HTTP缓存, Web Storage, Cookies等浏览器缓存

星辰_Stars
302 阅读6分钟

浏览器缓存是指浏览器在本地存储一份已请求过的资源的副本，以便在未来的请求中能够更快地获取这些资源。浏览器缓存有助于提高网页加载速度，减轻服务器的负担，并节省用户的流量。

HTTP 缓存

HTTP 协议的缓存机制，包括强缓存和协商缓存。

image.png

强缓存

强缓存通过设置 Cache-Control 和 Expires 等响应头，控制缓存的过期时间和重新验证机制。Expires返回一个具体的时间值，代表缓存的有效期。而Cache-Control可以设置以下属性值：

  • max-age：代表缓存时间，单位为秒
  • no-cache: 不使用强缓存（但仍会使用协商缓存）。
  • no-store: 不使用缓存（不使用强缓存也不使用协商缓存），每次都向服务器发送资源请求。
  • private： 只允许客户端使用缓存，不允许其他代理服务器进行缓存。
  • public: 客户端和代理服务器都可缓存。
  • s-maxage: 与max-age类似，区别是s-maxage是设定代理服务器的缓存时间。

注意：Cache-control的优先级要高于Expires

协商缓存

协商缓存通过服务器返回的 ETag 和 Last-Modified 头部，客户端可以使用它们来验证资源是否已经发生变化，从而进行条件请求，具体流程如下：

1.检查上次响应头中是否有Etag

2.有Etag，浏览器再会在请求头里携带If-None-Match（值是之前服务器返回的Etag的值），返回304即使用缓存

3.没有Etag，检查上次响应头是否Last-Modified的属性

4.有Last-Modified，浏览器请求头对应携带的是If-Modified-since（一个时间值，代表文件的修改时间），返回304即使用缓存

总结：

  • 强缓存就是浏览器本地根据服务器设置的过期时间来判断是否使用缓存，未过期则从本地缓存里拿资源，已过期则重新请求服务器获取最新资源。

  • 协商缓存则是浏览器本地每次都向服务器发起请求，由服务器来告诉浏览器是从缓存里拿资源还是返回最新资源给浏览器使用

Web Storage

Web Storage 是一种在浏览器中存储键值对数据的机制，存储容量有限制，通常为 5MB。有两种存储方式：localStorage 和 sessionStorage，这两者的主要区别在于数据的生命周期和作用域。

LocalStorage

提供一个持久化的本地存储，关闭浏览器标签或窗口后依然可用，数据在同源的所有页面中都是共享的。 有如下用法：

// 将键值对存储到 localStorage
localStorage.setItem('key', 'value');
// 从 localStorage 中获取值
const value = localStorage.getItem('key');
// 从 localStorage 中移除指定键的数据
localStorage.removeItem('key');
// 清空 localStorage 中的所有数据
localStorage.clear();

SessionStorage

数据仅在当前会话期间有效，当用户关闭标签页或浏览器时，数据将被清除。因此，SessionStorage的数据仅在同一标签页或窗口的不同页面之间共享。用法LocalStorage类似：

// 将键值对存储到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 中获取值
const value = sessionStorage.getItem('key');
// 从 sessionStorage 中移除指定键的数据
sessionStorage.removeItem('key');
// 清空 sessionStorage 中的所有数据
sessionStorage.clear();

注意事项

存储在 Web Storage 中的数据是以字符串形式存储的。如果需要存储对象或其他数据类型，需要使用 JSON.stringify 和 JSON.parse 进行转换。

// 存储对象到 localStorage
const user = { name: 'John', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 从 localStorage 中读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // 输出: { name: 'John', age: 25 }

应用场景

  • 用户认证信息： 将用户的登录状态、认证令牌等信息存储在 localStorage 中，以便在用户刷新页面或关闭浏览器后仍然保持登录状态。
  • 本地配置信息： 存储用户的本地偏好设置、主题选择等配置信息，以便用户下次访问时能够保持个性化的配置。
  • 缓存数据： 将一些常用的数据缓存在 localStorage 中，以减少对服务器的请求，提高应用的性能。
  • 前端状态管理： 在一些小型应用或单页面应用中，可以使用 localStorage 或 sessionStorage 来存储一些前端状态，如展开/折叠的菜单、选择的标签等。

Cookies：

Cookies 是在客户端存储的小型文本数据，通过浏览器和服务器之间的 HTTP 头部传递，具有以下特点

  • 持久性： 可以设置过期时间，用于保持用户登录状态、跟踪用户行为等，在过期时间之前一直存在于客户端，称为持久性 Cookie。如果不设置过期时间，则该 Cookie 将成为会话 Cookie，仅在浏览器会话期间有效
  • 同源策略： Cookie 受到同源策略的限制，即浏览器只会发送同一域下的 Cookie 到服务器。
  • 大小限制： 每个域名下的 Cookie 数量和每个 Cookie 的大小都有限制，通常一个域名下的所有 Cookie 总大小不超过 4KB
  • Secure 属性： 设置了 Secure 属性的 Cookie 只有在通过 HTTPS 协议加密的请求中才会被发送到服务器
  • HttpOnly 属性： 设置了 HttpOnly 属性的 Cookie 不能通过 JavaScript 访问，这有助于防止一些 XSS 攻击
// 创建
document.cookie = "username=John; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// 读取
const username = getCookie("username");
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split('=');
    if (cookie[0] === name) {
      return cookie[1];
    }
  }
  return "";
}
//删除，设置一个过去的过期时间
document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

用途

  • 用户身份验证： 在用户登录时，服务器可以发送一个包含用户身份信息的 Cookie，用于识别用户
  • 用户偏好设置： 存储用户的偏好设置，如主题、语言等
  • 购物车信息： 在电商网站中，可以使用 Cookie 存储用户的购物车信息
  • 跟踪分析： 用于分析用户行为，进行统计和分析

Service Worker 缓存

一种在浏览器背后运行的脚本，独立于网页，并具有强大的功能，如拦截和处理网络请求、缓存资源、推送通知等。Service Worker 主要用于提供离线支持(离线缓存)、改善性能(动态缓存)、拦截网络请求并自定义响应、实现推送通知等功能。

在实际应用中，Service Worker 的使用需要慎重考虑，因为它对网页的生命周期和网络请求有一定的影响。

IndexedDB：

IndexedDB是浏览器提供的一种本地数据库存储解决方案，允许网页在客户端存储大量结构化数据。它提供了一个类似于关系型数据库的 API，使用对象存储（Object Store）来存储数据。IndexedDB 通常用于在客户端存储大量结构化数据，例如离线应用、缓存等。

refs：juejin.cn/post/725929…

avatar
文章
阅读
粉丝