javascript - 缓存背景图像(javascript)

Question

当我点击某个链接(link1 ...)时，它会使用 jquery 函数更改正文背景

 $("#link-home").click( function(){ $
    ("body").removeClass("bg2 bg3 bg4").addClass("bg1");
    });

    $("#link-link1").click( function(){ $
    ("body").removeClass("bg2 bg3 bg4").addClass("bg1");
    });

    $("#link-link2").click( function(){ $
    ("body").removeClass("bg1 bg3 bg4").addClass("bg2");
    }); 

问题出在我刷新网页时。它将背景更改为默认值。有两种选择如何做到这一点。首先仅将 css 用于更改背景(我尝试了几个小时但没有结果)或使用缓存。但是我如何缓存我的背景图片呢？我试过 locache .我将 locache.js 添加到头部，但它不起作用。

Answer 1

您不需要缓存背景图片，因为浏览器会默认为您缓存它。 一个简单的解决方案是:

$(window).ready(function() {
    var switchBackground = function(bg) {
        var savedBackgorund = window.localStorage.activeBackground;
        var bg = typeof bg !== 'undefined' ? bg :
            (savedBackground ? savedBackground : 'bg1');
        $('body').removeClass('bg1 bg2 bg3 bg4').addClass(bg);
        window.localStorage.activeBackground = bg;
    }

    switchBackground();

    $("#link-home").click( function() {
        switchBackground("bg1");
    });

    $("#link-link1").click( function() {
        switchBackground("bg1");
    });

    $("#link-link2").click( function() {
        switchBackground("bg2");
    });
});