图片怎么存缓存js

图片存缓存JS的方法有：使用浏览器缓存机制、利用Service Worker进行缓存、使用IndexedDB进行缓存、通过localStorage进行缓存。在这里，我们将详细展开浏览器缓存机制的使用。

浏览器缓存机制是一种高效且便捷的方式，它能够让网页资源在用户首次访问后被缓存起来，从而加快后续访问速度。具体来说，当浏览器首次请求图片资源时，会将其下载并缓存到本地存储中。在随后的访问中，如果图片资源没有发生变化，浏览器会直接从缓存中读取，从而减少网络请求，提升页面加载速度。

一、使用浏览器缓存机制

浏览器缓存机制是前端开发中最常用的缓存方法之一。它通过设置HTTP头信息来控制资源的缓存行为。以下是一些常见的HTTP头信息：

1、Cache-Control

Cache-Control 是HTTP/1.1中的一个头字段，用于指定请求和响应的缓存机制。例如：

Cache-Control: max-age=3600

上面的例子表示资源将被缓存3600秒（1小时）。你可以通过在服务器端设置响应头来实现这一点：

res.setHeader('Cache-Control', 'max-age=3600');

2、Expires

Expires 是HTTP/1.0中的一个头字段，用于指定资源的过期时间。该时间是一个绝对时间点。例如：

Expires: Wed, 21 Oct 2021 07:28:00 GMT

这个头字段告诉浏览器在指定时间点之前，资源都是有效的，不需要重新请求。

3、ETag

ETag 是一个HTTP头字段，用于验证资源是否发生了变化。服务器会生成一个唯一的标识符（通常是基于文件内容的哈希值），并在响应头中包含这个标识符。

ETag: "5d8c72a5edda3e"

浏览器在后续请求中会发送这个标识符，如果服务器发现资源没有变化，就会返回304 Not Modified状态码，告诉浏览器使用缓存的版本。

二、利用Service Worker进行缓存

Service Worker是一种运行在后台的脚本，可以拦截网络请求并进行缓存管理。通过Service Worker，你可以更灵活地控制资源的缓存策略。

1、注册Service Worker

首先，需要在你的JavaScript文件中注册Service Worker：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}

2、编写Service Worker脚本

在service-worker.js文件中，你可以编写拦截网络请求并进行缓存的逻辑：

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/images/image1.jpg',
                '/images/image2.jpg'
            ]);
        })
    );
});
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

三、使用IndexedDB进行缓存

IndexedDB是一种低级API，用于在客户端存储大量结构化数据。你可以利用IndexedDB来缓存图片资源。

1、打开数据库

首先，需要打开或者创建一个IndexedDB数据库：

var request = indexedDB.open('my-database', 1);
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    db.createObjectStore('images', { keyPath: 'url' });
};

2、存储图片

你可以通过将图片数据存储到IndexedDB中来实现缓存：

function storeImage(url, blob) {
    var transaction = db.transaction(['images'], 'readwrite');
    var store = transaction.objectStore('images');
    store.put({ url: url, blob: blob });
}

3、读取图片

在需要使用图片时，可以从IndexedDB中读取：

function getImage(url, callback) {
    var transaction = db.transaction(['images'], 'readonly');
    var store = transaction.objectStore('images');
    var request = store.get(url);
    request.onsuccess = function(event) {
        callback(event.target.result.blob);
    };
}

四、通过localStorage进行缓存

localStorage是一种简单的键值对存储机制，虽然容量有限，但对于小型图片资源的缓存仍然适用。

1、存储图片

你可以将图片的Base64编码字符串存储到localStorage中：

function storeImage(url, base64String) {
    localStorage.setItem(url, base64String);
}

2、读取图片

在需要使用图片时，可以从localStorage中读取：

function getImage(url) {
    return localStorage.getItem(url);
}

3、应用示例

以下是一个完整的示例，展示如何将图片存储到localStorage中并在需要时读取和显示：

// 存储图片
var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/jpeg');
    storeImage('image.jpg', dataURL);
};
// 读取图片
var base64String = getImage('image.jpg');
if (base64String) {
    var imgElement = document.createElement('img');
    imgElement.src = base64String;
    document.body.appendChild(imgElement);
}

五、缓存策略的选择

在不同的应用场景下，需要选择合适的缓存策略：

1、静态资源

对于静态资源，如图片、CSS、JavaScript文件，可以使用浏览器缓存机制或者Service Worker进行缓存。这能够显著提升页面加载速度。

2、大型数据

对于大型数据，可以考虑使用IndexedDB进行缓存。IndexedDB适合存储大量结构化数据，并且支持离线访问。

3、小型数据

对于小型数据，如用户偏好设置、会话信息等，可以使用localStorage进行缓存。localStorage操作简单，但容量有限。

六、缓存更新机制

缓存虽然能够提升性能，但也需要考虑更新机制，以确保用户获取到最新的资源。以下是几种常见的缓存更新策略：

1、Cache Busting

Cache Busting是一种常见的缓存更新策略，通过在资源URL中添加版本号或者哈希值来强制浏览器请求最新的资源。例如：

<script src="app.js?v=1.0.1"></script>

当资源发生变化时，只需要更新版本号，浏览器就会请求最新的资源。

2、Service Worker更新

对于使用Service Worker进行缓存的应用，可以在Service Worker中监听activate事件，并在新的Service Worker激活时清理旧的缓存：

self.addEventListener('activate', function(event) {
    var cacheWhitelist = ['my-cache-v2'];
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

3、缓存失效策略

可以设置缓存的失效时间，在资源过期后自动请求最新的资源。例如，通过设置Cache-Control: max-age头字段来实现。

七、实际应用中的建议

在实际应用中，建议结合多种缓存策略，以达到最佳的性能效果：

1、静态资源使用浏览器缓存

对于静态资源，如图片、CSS、JavaScript文件，建议使用浏览器缓存机制，并结合Cache Busting策略进行更新。

2、动态数据使用IndexedDB

对于动态数据，如用户数据、离线存储数据，建议使用IndexedDB进行缓存。IndexedDB能够存储大量结构化数据，并且支持离线访问。

3、小型数据使用localStorage

对于小型数据，如用户偏好设置、会话信息等，建议使用localStorage进行缓存。localStorage操作简单，但容量有限，适合存储小型数据。

通过合理选择和组合缓存策略，可以显著提升网页性能，改善用户体验。在实现缓存功能的同时，也要注意缓存更新机制，以确保用户能够获取到最新的资源。