个人知识库

Appearance

浏览器缓存 ​

缓存 ​

从 HTTP 缓存策略来说 ​

  • 强缓存
  • 协商缓存

从浏览器的缓存位置来说 ​

  • Service Worker Cache （必须是 Https）
  • Memory Cache （内存缓存）
  • Disk Cache （硬盘缓存）
  • Push Cache （Http2.0）

本地存储 ​

请求时携带，用于信息持久化

Local Storage 本地存储 ​

用于长期不变化的数据，只能存储字符串

Session Storage 会话存储 ​

用于存储当前会话的数据，只能存储字符串

indexedDB ​

非关系型数据库

Service Worker ​

运行在浏览器背后的独立线程（必须 HTTPS 才能使用）

js
// main.js
/* 判断当前浏览器是否支持serviceWorker */
if ('serviceWorker' in navigator) {
  /* 当页面加载完成就创建一个 serviceWorker */
  window.addEventListener('load', function () {
    /* 创建并指定对应的执行内容 */
    /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。 */
    navigator.serviceWorker.register('./serviceWorker.js')
      .then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
      .catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}
// main.js
/* 判断当前浏览器是否支持serviceWorker */
if ('serviceWorker' in navigator) {
  /* 当页面加载完成就创建一个 serviceWorker */
  window.addEventListener('load', function () {
    /* 创建并指定对应的执行内容 */
    /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。 */
    navigator.serviceWorker.register('./serviceWorker.js')
      .then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
      .catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}
js
// serviceWorker.js
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener("install", function (event) {
  /* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
  event.waitUntil(
    /* 创建一个名叫V1的缓存版本 */
    caches.open("v1").then(function (cache) {
      /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
      console.log(`加入缓存了`);
      return cache.addAll(["./index.html"]);
    })
  );
});

/* 注册fetch事件，拦截全站的请求 */
this.addEventListener("fetch", function (event) {
  console.log(`开启拦截了？？？`);
  event.respondWith(
    (async () => {
      // magic goes here
      /* 在缓存中匹配对应请求资源直接返回 */
      const cachedRes = await caches.match(event.request);

      console.log(`是否命中了缓存`, cachedRes);
      if (cachedRes) return cachedRes;

      const response = await fetch(event.request);

      return response;
    })()
  );
});
// serviceWorker.js
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener("install", function (event) {
  /* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
  event.waitUntil(
    /* 创建一个名叫V1的缓存版本 */
    caches.open("v1").then(function (cache) {
      /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
      console.log(`加入缓存了`);
      return cache.addAll(["./index.html"]);
    })
  );
});

/* 注册fetch事件，拦截全站的请求 */
this.addEventListener("fetch", function (event) {
  console.log(`开启拦截了？？？`);
  event.respondWith(
    (async () => {
      // magic goes here
      /* 在缓存中匹配对应请求资源直接返回 */
      const cachedRes = await caches.match(event.request);

      console.log(`是否命中了缓存`, cachedRes);
      if (cachedRes) return cachedRes;

      const response = await fetch(event.request);

      return response;
    })()
  );
});