JS实现缓存的核心是利用浏览器存储机制减少网络请求，提升性能。1. LocalStorage/SessionStorage适合存储少量字符串数据，前者持久化，后者仅限会话；2. IndexedDB适用于大量结构化数据，支持事务和索引，但API复杂；3. Cache API可缓存网络响应，常用于静态资源，结合Service Worker实现离线访问；4. 内存缓存通过变量存储，速度快但页面刷新后失效；5. 第三方库如lru-cache提供更优策略。选择方案需考虑数据类型、容量与一致性。常用策略包括LRU、LFU、FIFO及基于时间的过期机制。缓存更新可通过手动、事件驱动、版本号或HTTP头控制。为避免数据不一致等问题，应合理设置策略、控制容量、及时更新并提供清除机制。Service Worker结合Cache API可在install阶段预缓存资源，并在fetch事件中优先返回缓存响应，实现离线可用性。
JS实现缓存，核心在于利用浏览器提供的存储机制，以及一些巧妙的策略，来减少不必要的网络请求，提升用户体验。简单来说，就是把一些数据“存起来”，下次用的时候直接从“存的地方”拿，不用再费劲去服务器要。
解决方案
JS实现缓存的方法有很多，根据不同的场景和需求，选择合适的方案至关重要。
-
LocalStorage/SessionStorage: 这是最常用的方法之一。LocalStorage 提供了持久化的存储，数据不会随着浏览器关闭而丢失；SessionStorage 则只在当前会话有效，关闭浏览器窗口或标签页后数据就会被清除。使用起来非常简单：
// 存储 localStorage.setItem('myKey', 'myValue'); // 读取 const myValue = localStorage.getItem('myKey'); // 删除 localStorage.removeItem('myKey'); // 清空所有 localStorage.clear();要注意的是，LocalStorage/SessionStorage 存储的数据都是字符串，如果需要存储对象，需要先用
JSON.stringify()
转换成字符串，读取时再用JSON.parse()
转换回来。 另外，LocalStorage/SessionStorage 有容量限制，一般是5MB左右，所以不适合存储大量数据。 IndexedDB: 这是一个更强大的浏览器存储方案，可以存储大量结构化数据，并且支持事务、索引等高级特性。相比LocalStorage/SessionStorage，IndexedDB更适合存储复杂的、大量的数据。 但是，IndexedDB 的 API 相对复杂，使用起来比较繁琐。
-
Cache API: Cache API 是 Service Worker 的一部分，但也可以在主线程中使用。它可以缓存网络请求的响应，非常适合缓存静态资源，例如图片、CSS、JS 文件等。
// 缓存图片 caches.open('my-cache').then(cache => { cache.add('/images/my-image.jpg'); }); // 从缓存中读取图片 caches.open('my-cache').then(cache => { cache.match('/images/my-image.jpg').then(response => { if (response) { // 使用缓存中的图片 response.blob().then(blob => { const img = document.createElement('img'); img.src = URL.createObjectURL(blob); document.body.appendChild(img); }); } else { // 从网络请求图片 fetch('/images/my-image.jpg').then(response => { return response.blob(); }).then(blob => { const img = document.createElement('img'); img.src = URL.createObjectURL(blob); document.body.appendChild(img); // 将图片缓存起来 caches.open('my-cache').then(cache => { cache.put('/images/my-image.jpg', new Response(blob)); }); }); } }); }); 内存缓存: 在 JavaScript 中，也可以直接使用变量来缓存数据。这种方式速度最快，但是数据只在当前页面有效，刷新页面后数据就会丢失。 适用于缓存一些临时性的、不重要的数据。
使用第三方库: 有很多优秀的第三方库可以帮助我们更方便地实现缓存，例如
lru-cache
、store.js
等。 这些库通常提供了更高级的缓存策略和 API，可以更灵活地控制缓存的行为。
如何选择合适的缓存策略？
缓存策略的选择取决于数据的特性、缓存的容量、以及对缓存一致性的要求。常见的缓存策略有：
LRU (Least Recently Used): 移除最近最少使用的数据。 这种策略适用于缓存经常访问的数据，可以提高缓存的命中率。
LFU (Least Frequently Used): 移除使用频率最低的数据。 这种策略适用于缓存访问频率较高的数据，可以避免缓存一些很少使用的数据。
FIFO (First In First Out): 移除最先进入缓存的数据。 这种策略实现简单，但是效果可能不如 LRU 和 LFU。
基于时间的过期策略: 为缓存的数据设置一个过期时间，超过过期时间后数据自动失效。 这种策略适用于缓存一些有时效性的数据，可以保证数据的及时更新。
缓存失效了怎么办？如何更新缓存？
缓存失效是不可避免的，我们需要考虑如何更新缓存，以保证数据的准确性。
手动更新: 当数据发生变化时，手动更新缓存。 例如，当用户修改了个人信息后，需要手动更新缓存中的用户信息。
基于事件的更新: 当某些事件发生时，自动更新缓存。 例如，当服务器推送了新的消息时，可以自动更新缓存中的消息列表。
版本号控制: 为缓存的数据设置一个版本号，当数据发生变化时，更新版本号。 当客户端发现缓存的版本号与服务器的版本号不一致时，重新请求数据并更新缓存。
HTTP 缓存控制: 利用 HTTP 协议提供的缓存控制机制，例如
Cache-Control
、Expires
、ETag
等，来控制缓存的行为。
如何避免缓存导致的问题？
缓存虽然可以提高性能，但也可能导致一些问题，例如数据不一致、缓存污染等。 为了避免这些问题，我们需要注意以下几点：
设置合理的缓存策略: 根据数据的特性选择合适的缓存策略，例如 LRU、LFU、基于时间的过期策略等。
控制缓存的容量: 避免缓存过多的数据，导致内存占用过高。
及时更新缓存: 当数据发生变化时，及时更新缓存，保证数据的准确性。
使用缓存清除机制: 提供缓存清除机制，允许用户手动清除缓存。
监控缓存的状态: 监控缓存的命中率、容量等指标，及时发现和解决问题。
Service Worker 如何利用 Cache API 实现离线缓存？
Service Worker 是一个运行在浏览器后台的脚本，可以拦截网络请求，并根据缓存策略返回缓存的响应。 利用 Service Worker 和 Cache API，可以实现离线缓存，让用户在没有网络连接的情况下也能访问应用。
-
注册 Service Worker: 在页面中注册 Service Worker。
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(registration => { console.log('Service Worker registered with scope:', registration.scope); }).catch(error => { console.log('Service Worker registration failed:', error); }); } -
在 Service Worker 中监听
install
事件: 在install
事件中，可以预先缓存一些静态资源。self.addEventListener('install', event => { event.waitUntil( caches.open('my-cache').then(cache => { return cache.addAll([ '/', '/index.html', '/style.css', '/script.js', '/images/my-image.jpg' ]); }) ); }); -
在 Service Worker 中监听
fetch
事件: 在fetch
事件中，可以拦截网络请求，并尝试从缓存中返回响应。 如果缓存中没有响应，则从网络请求，并将响应缓存起来。self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request).then(response => { return caches.open('my-cache').then(cache => { cache.put(event.request, response.clone()); return response; }); }); }) ); });
通过以上步骤，就可以实现简单的离线缓存。 当用户在没有网络连接的情况下访问应用时，Service Worker 会从缓存中返回预先缓存的静态资源，从而保证应用可以正常运行。
