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");
    });
});

缓存背景图片（javascript）

1 个答案: