如何缓存网站图标 javascript

Question

我正在尝试像缓存任何其他图像一样缓存我的网站图标图像，但我没有在缓存中看到它，也没有得到我的确认 console.log，当我断开与互联网的连接时也没有看到它（基本上不是缓存）

我想缓存它以便我可以离线访问它，这样我就可以在网络断开时动态更改图标。

我的html:

<link id="favicon" rel="icon" type="image/png" src="assets/favicon-red-16x16.ico.png">

我的js：

// 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，我该如何存储和从本地存储中获取它？

ps。使用 Chrome 最新

<___更新___>

虽然技术上回答了这个问题，但我如何做这两个存储2（多个）base64图像？我不知道如何将 2 绘制到 canvas 或 2 canvases.

Answer 1

试试这个码友。您可以隐藏 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

how to cache favicon javascript

javascript

favicon

caching