JQuery – 记住图像状态

我的网站上有一个可以点击的图片。 点击后，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"); }); }); 

使用cookies：

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 

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