缓存背景图片（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");
    });
});