如何为背景转换器代码设置cookie?

时间:2015-04-08 04:08:44

标签: javascript jquery cookies background

这是我需要设置cookie的代码。我是一个身体背景图像更换器,我想设置cookie在x天后到期! 无论是javascript还是jquery cookies!



<script>
$(document).ready(function(){ 

        $("li.one").click( function(){ $
		("body").removeClass('bg2 , bg3 , bg4 , bg5 , bg6 , bg7 ,bg8').addClass("bg1");
	});

	$("li.two").click( function(){ $
		("body").removeClass("bg1 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8").addClass("bg2");
	});

	$("li.three").click( function(){ $
		("body").removeClass("bg1 , bg2 , bg4 , bg5 , bg6 , bg7 , bg8").addClass("bg3");
	}); 

        $("li.four").click( function(){ $
		("body").removeClass('bg1 , bg2 , bg3 , bg5 , bg6 , bg7 , bg8').addClass("bg4");
	});
  
          $("li.five").click( function(){ $
		("body").removeClass('bg1 , bg2 , bg3 , bg4 , bg6 , bg7 , bg8').addClass("bg5");
	});
  
            $("li.six").click( function(){ $
		("body").removeClass('bg1 , bg2 , bg3 , bg4 , bg5 , bg7 , bg8').addClass("bg6");
	});
  
              $("li.seven").click( function(){ $
		("body").removeClass('bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg8').addClass("bg7");
	});
  
                $("li.eight").click( function(){ $
		("body").removeClass('bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7').addClass("bg8");
	});

});
</script>
&#13;
<ul id="foxycode-panel_bg_image">
	<li class="one"><a href="#"></a></li>
        <li class="two"><a href="#"></a></li>
        <li class="three"><a href="#"></a></li>
        <li class="four"><a href="#"></a></li>
</ul>
 
................ 
&#13;
&#13;
&#13; 谢谢!

2 个答案:

答案 0 :(得分:1)

如果您正在寻找一种方法来设置n天的cookie。您可以使用以下功能:

<script type="text/javascript">
function setCookie(cookieName,cookieValue,nDays) {
    var today = new Date();
    var expire = new Date();
    if (nDays==null || nDays==0) nDays=1;
    expire.setTime(today.getTime() + 3600000*24*nDays);
    document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
}
</script>
and to get the cookie, you can use
<script type="text/javascript">
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 "";
}
</script>

非常适合我。

答案 1 :(得分:0)

您可以尝试使用jQuery cookie

&#13;
&#13;
$(document).ready(function () {

    var $lis = $("#foxycode-panel_bg_image li");
    var classes = $lis.map(function () {
        return $(this).data('class')
    }).get()

    $lis.click(function () {
        $("body").removeClass(classes.join(' ')).addClass($(this).data('class'));

        $.cookie('background-class', $(this).data('class'), {
            expires: 7
        });
    });

    var clazz = $.cookie('background-class');
    if (clazz) {
        $("body").addClass(clazz)
    }

});
&#13;
.bg1 {
    background-color: #ff0000;
}
.bg2 {
    background-color: #00ff00;
}
.bg3 {
    background-color: #0000ff;
}
.bg4 {
    background-color: #0ffff0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<ul id="foxycode-panel_bg_image">
    <li class="one" data-class="bg1"><a href="#">bg1</a></li>
    <li class="two" data-class="bg2"><a href="#">bg2</a></li>
    <li class="three" data-class="bg3"><a href="#">bg3</a></li>
    <li class="four" data-class="bg4"><a href="#">bg4</a></li>
</ul>
&#13;
&#13;
&#13;

演示:Fiddle