js设置图片优先从本地缓存读取

在 JavaScript 中，可以通过 `localStorage` 结合 `Image` 对象来实现设置图片优先从本地缓存读取。以下是实现的代码示例： ```javascript // 封装一个函数用于加载图片，优先从本地缓存读取 function loadImageWithCache(url) { // 尝试从本地存储中获取图片的 base64 数据 const cachedImage = localStorage.getItem(url); if (cachedImage) { // 如果本地存储中有该图片的缓存数据 const img = new Image(); // 将 base64 数据赋值给图片的 src 属性 img.src = cachedImage; // 将图片添加到页面中，这里假设页面中有一个 id 为 'image-container' 的元素用于显示图片 document.getElementById('image-container').appendChild(img); } else { // 如果本地存储中没有该图片的缓存数据 const img = new Image(); img.src = url; img.onload = function () { // 创建一个 canvas 元素 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度为图片的宽度和高度 canvas.width = img.width; canvas.height = img.height; // 将图片绘制到 canvas 上 ctx.drawImage(img, 0, 0); // 将 canvas 上的图像转换为 base64 数据 const dataURL = canvas.toDataURL(); // 将 base64 数据存储到本地存储中 localStorage.setItem(url, dataURL); // 将图片添加到页面中 document.getElementById('image-container').appendChild(img); }; } } // 使用示例，传入图片的 URL loadImageWithCache('https://example.com/image.jpg'); ``` 上述代码实现了图片优先从本地缓存读取的功能。首先尝试从 `localStorage` 中获取图片的 base64 数据，如果有则直接使用该数据显示图片；如果没有，则从网络加载图片，加载完成后将图片转换为 base64 数据并存储到 `localStorage` 中。 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. `localStorage` 的存储容量是有限的，通常为 5MB 左右，如果存储大量的图片数据可能会导致存储满的问题，需要定期清理缓存。 2. 图片的 base64 数据可能会比较大，会占用较多的内存，在处理大图片时需要注意性能问题。 3. 当图片的 URL 发生变化时，需要手动清除对应的缓存数据，否则会一直使用旧的缓存数据。 [2025-09-04 10:59:13 | AI写代码神器 | 598点数解答]