js 浏览器缓存

// 使用浏览器缓存的示例代码

// 1. 设置 HTTP 头来控制缓存
// 在服务器端设置响应头，例如在 Node.js 中使用 Express 框架
app.get('/some-route', (req, res) => {
  // 设置缓存时间为 1 小时
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.send('This response is cacheable for 1 hour.');
});

// 2. 使用 Service Worker 来缓存资源
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(error => {
      console.log('Service Worker registration failed:', error);
    });
  });
}

// service-worker.js 文件内容
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// 3. 使用 localStorage 或 sessionStorage 来缓存数据
// 存储数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
const value = localStorage.getItem('key');

// 删除 localStorage 中的数据
localStorage.removeItem('key');

// 清空 localStorage
localStorage.clear();

解释说明：

1. HTTP 头控制缓存：通过设置 Cache-Control 响应头，可以控制浏览器如何缓存资源。max-age 参数指定了资源在客户端缓存中的有效时间（以秒为单位）。
2. Service Worker 缓存资源：Service Worker 是一种可以在后台运行的脚本，它可以拦截和处理网络请求，并将资源存储在缓存中。当用户再次访问页面时，Service Worker 可以从缓存中提供资源，从而提高加载速度。
3. LocalStorage 和 SessionStorage：这两种 API 可以用于在浏览器中存储键值对数据。localStorage 的数据是持久化的，而 sessionStorage 的数据仅在会话期间有效。