JQuery - 记住图像状态

Question

我的网站上有一张可以点击的图片。点击后，jquery会更改图像并运行ajax查询。

我不希望记住图像状态。它将是ON或OFF。 我知道我应该使用cookie或本地存储，但我需要确保这适用于一些可能是旧的浏览器，而且我不知道如何处理保存状态..

我用来切换图片的代码是：

jQuery(function(){
         $(".img-swap").live('click', function() {
            if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("_off","_on");
            } else {
            this.src = this.src.replace("_on","_off");
            }
            $(this).toggleClass("on");
        });
});

我已经创建了一个 JFiddle 来显示图像的切换，这确实有效，但有些人可以指出我正确的方向来记住图像状态页面重新加载或刷新。

由于

Answer 1

使用localstorage：

<强>的jsfiddle： 的 http://jsfiddle.net/9CkDq/1/

jQuery(function(){
    if(localStorage.getItem("class") =="on"){   
        $(".img-swap").attr("src",$(".img-swap").attr("src").replace("_off","_on")).addClass("on");
    }
    $(".img-swap").on('click', function() {
        if ($(this).attr("class") == "img-swap") {
            localStorage.setItem("class","on");
            this.src = this.src.replace("_off","_on");
        } else {
            localStorage.setItem("class","off");
            this.src = this.src.replace("_on","_off");            
        }
        $(this).toggleClass("on");
    });
});

使用Cookie：

<强>的jsfiddle： 的 http://jsfiddle.net/9CkDq/9/

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

jQuery(function(){
    if(getCookie("class")=="_on"){   
        $(".img-swap").attr("src",$(".img-swap").attr("src").replace("_off","_on")).addClass("on");
    }
    $(".img-swap").on('click', function() {
        if ($(this).attr("class") == "img-swap") {
            setCookie("class","_on");
            this.src = this.src.replace("_off","_on",30);
        } else {
            setCookie("class","_off");
            this.src = this.src.replace("_on","_off",30);            
        }
        $(this).toggleClass("on");
    });
});

您可以使用会话来存储特定会话的状态，并使用db来保存状态。