CacheStorage详解

CacheStorage的基本概念

• 定义与作用：CacheStorage是浏览器提供的一种存储机制，用于缓存网络资源，如脚本、样式表、图片等。它是Service Worker API的一部分，目的是为了提高网页的性能和离线可用性。例如，当用户第一次访问一个网页时，浏览器可以将网页的一些关键资源（如HTML文件、主要的CSS和JavaScript文件）存储到CacheStorage中。当下次访问该网页或者在离线状态下再次请求这些资源时，浏览器可以直接从CacheStorage中获取，而不必重新从网络下载，从而加快了网页的加载速度。
• 与其他存储机制的关系：与localStorage和sessionStorage不同，CacheStorage主要用于缓存网络请求的响应，并且存储的内容通常是由浏览器或Service Worker自动管理的。而localStorage和sessionStorage主要用于存储应用程序的数据，如用户的偏好设置、登录状态等，并且是通过JavaScript代码显式地进行存储和读取操作。

CacheStorage的使用方法

• 打开和获取缓存（Cache）对象：
  • 可以通过caches.open()方法来打开一个指定名称的缓存。如果缓存不存在，则会创建一个新的缓存。例如：

    caches.open('my - cache - name').then((cache) => {
             
      // 在这里可以使用cache对象进行操作
    });
    

  • 打开缓存后，可以使用cache对象进行各种操作，如添加、匹配和删除缓存项。
• 添加缓存项：
  • 可以使用cache.addAll()方法来添加一组资源到缓存中。这些资源通常是通过网络请求获取的响应。例如，在Service Worker中，可以这样添加缓存项：

    self.addEventListener('fetch', function (event) {
             
      event.respondWith(
          caches.open('my - cache - name').then((cache) => {
             
              return cache.addAll([
                  '/',
                  '/index.html',
                  '/styles.css',
                  '/script.js'
              ]);
          })
      );
    });
    

  • 上述代码在fetch事件中，当Service Worker拦截到网络请求时，会尝试将指定的资源添加到名为my - cache - name的缓存中。
• 匹配缓存项：
  • 使用cache.match()方法可以在缓存中查找与给定请求匹配的缓存项。例如，在Service Worker的fetch事件处理程序中，可以这样使用：

    self.addEventListener('fetch', function (event) {
             
      event.respondWith(
          caches.open('my - cache - name').then((cache) => {
             
              return cache.match(event.request).then((response) => {
             
                  if (response) {
             
                      return response;
                  }
                  return fetch(event.request);
              });
          })
      );
    });
    

  • 这段代码首先尝试从缓存中查找与请求匹配的响应，如果找到则直接返回缓存中的响应，否则通过fetch方法从网络获取响应。
• 删除缓存项和缓存本身：
  • 可以使用cache.delete()方法删除缓存中的单个项目。例如，要删除一个特定的URL对应的缓存项，可以这样做：

    caches.open('my - cache - name').then((cache) => {
             
      cache.delete('/old - resource.html');
    });
    

  • 要删除整个缓存，可以使用caches.delete()方法并指定缓存的名称。例如：

    caches.delete('my - cache - name');
    

CacheStorage的生命周期和缓存策略

• 缓存的生命周期：
  • 缓存项在CacheStorage中的存储时间是由缓存策略决定的。一些缓存可能会一直存储，直到用户手动清除浏览器缓存或者缓存被代码显式删除。而另一些缓存可能会根据一定的规则（如缓存过期时间、资源更新情况等）自动更新或清除。
  • 例如，在设置缓存时，可以通过在响应头中添加Cache - Control和Expires等字段来指定缓存的有效期。浏览器会根据这些信息来判断何时需要重新获取资源，而不是使用缓存中的旧资源。
• 缓存策略：
  • 强缓存策略：如果响应头中有Cache - Control: max - age = 31536000（表示缓存有效期为一年）这样的设置，并且缓存尚未过期，浏览器会直接使用缓存中的资源，而不会发送网络请求。这种策略适用于那些很少变化的资源，如网站的图标、一些基础的JavaScript库等。
  • 协商缓存策略：当响应头中有Last - Modified或ETag等字段时，浏览器在使用缓存资源之前会先发送一个条件请求（例如，在请求头中带上If - Modified - Since或If - None - Match字段）到服务器，询问资源是否已经更新。如果服务器返回304 Not Modified响应，表示资源没有更新，浏览器继续使用缓存中的资源；如果服务器返回新的资源内容，浏览器更新缓存并使用新资源。这种策略适用于那些可能会定期更新的资源，如网页的HTML文件等。