缓存背景图片 (javascript)答案

【问题标题】：cache background image (javascript)缓存背景图片 (javascript)
【发布时间】：2014-05-14 06:58:02
【问题描述】：

当我点击某个链接（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 添加到 head 但它不起作用。

【问题讨论】：

您只是更改当前窗口会话的背景。当您重新加载页面时，一切都会重新开始。如果要持久化数据，则需要使用 cookie、localStorage 或服务器端方法来存储和检索用户首选项。
我知道，但 locachejs.org 是本地存储。但为什么它不起作用？我做坏事？我只将 .js 文件添加到我的脑海中。

标签： javascript jquery css caching

【解决方案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");
    });
});

【讨论】：

嗨，感谢您的回复，但它对我不起作用。哪里有问题？
没有错误，当我点击某个链接时它不会改变背景。仍然有默认的正文背景。