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