JQuery的 - 记住图像状态(JQuery - Remember Image State)

我有我的网站上的图像，可以点击。 一旦点击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:

使用本地存储：

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

您可以使用会话存储状态特定的会话和数据库中保存状态，直到永远。

文章来源: JQuery - Remember Image State