我正在尝试像缓存任何其他图像一样缓存我的网站图标图像，但我没有在缓存中看到它，也没有收到我的确认 console.log，当我断开与 Internet 的连接时也没有看到它(基本上它是不缓存)。
我想缓存它以便我可以离线访问它，这样我就可以在互联网断开连接时动态更改图标。
我的 html:
<link id="favicon" rel="icon" type="image/png" src="assets/favicon-red-16x16.ico.png">
我的代码:
// cache images
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
console.log('caching image...')
var img = new Image();
img.onload = function() {
console.log('image cached')
var index = list.indexOf(this);
if (index !== -1) {
// remove image from the array once it's loaded
// for memory consumption reasons
list.splice(index, 1);
}
}
list.src = array[i];
}
}
preloadImages(["../assets/favicon-green-16x16.ico.png", "../assets/favicon-red-16x16.ico.png"]);
问题:是否可以缓存客户端的图标？有没有其他方法可以在本地存储？
如果我转换为 base64，我该如何存储和从本地存储中获取它？
附言。使用最新的 Chrome
<___ 更新 ___>
虽然技术上回答了这个问题，但我怎样才能做到这两个存储 2(多个)base64 图像？我不知道如何在 Canvas 上绘制 2 个或 2 个 Canvas 。
最佳答案
试试这个代码 friend 。 您可以隐藏 iconImage img 元素。我使用的另一个 img 标签仅用于测试，因此您可以将其删除。
<!DOCTYPE html>
<html>
<link id="favicon" rel="icon" href="img_the_scream.jpg" />
<body>
<img id="iconImage" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<br />
<img id="img" width="220" height="277"/>
<script>
function onLoadHandler() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("iconImage");
var base64Image = localStorage.getItem("lsFavicon");
var favicon = document.getElementById("favicon");
var img2 = document.getElementById("img");
if (base64Image == null && document.navigator.onLine) {
ctx.drawImage(img, 0, 0);
base64Image = canvas.toDataURL();
localStorage.setItem("lsFavicon", base64Image);
favicon.setAttribute("href", base64Image);
}
else if (base64Image != null) {
favicon.setAttribute("href", base64Image);
img2.setAttribute("src", base64Image);
}
}
window.onload = onLoadHandler;
</script>
</body>
</html>
关于javascript - 如何缓存图标javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48469908/