【www.bbyears.com--js教程】
今天我们来写如何用js来设置cookie、读取cookie、删除cookie。本文代码来自网络，并附上网页常见的使用cookie换肤案例供学习。
设置cookie
代码如下function setCookie(name, value,days) {
//三个参数，一个是cookie的名子，一个是值，最后一个是天数
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}读取cookie
function getCookie(name) {
//取cookies函数
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null)
return unescape(arr[2]);
return null;
}
删除cookie
代码如下function delCookie(name){
//删除cookie并重新演示
// 该函数检查下cookie是否设置，如果设置了则将过期时间调到过去的时间;
//剩下就交给操作系统适当时间清理cookie啦
if (getCookie(name))
{
document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
读取cookie
代码如下
<script type="text/javascript">
//
function setCookie(name,value)
{
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date( "December 31, 9998 ");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "= "+ escape(value) + ";expires= "+ exp.toGMTString();
}
function getCookie2(objName){//获取指定名称的cookie的值
var arrStr = document.cookie.split("; ");
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr.split("=");
if(temp[0] == objName) return unescape(temp[1]);
}
}
var _b = false;
//setCookie("mycookie","mycookie");
if(typeof(getCookie2("mycookie2")) != "undefined")
{
alert(typeof(getCookie2("mycookie2")));
_b = true;
}
alert(_b);
if(_b){
document.write("");
}else{
document.write(" 请登录");
}
//]]>
</script>
使用cookie换肤
除了添加上面的代码外，下面的这个是换肤系统的关键代码
var themes = {
"gray" : "tpl/gray.css",
"black" : "tpl/black.css",
"bootstrap" : "tpl/bootstrap.css",
"default" : "tpl/default.css",
"metro" : "tpl/metro.css"
};
var skins = $(".li-skinitem span").click(function() {
var $this = $(this);
if($this.hasClass("cs-skin-on")) return;
skins.removeClass("cs-skin-on");
$this.addClass("cs-skin-on");
var skin = $this.attr("rel");
$("#swicth-style").attr("href", themes[skin]);
setCookie("cs-skin", skin);
skin == "dark-hive" ? $(".cs-north-logo").css("color", "#FFFFFF") : $(".cs-north-logo").css("color", "#000000");
});
if(getCookie("cs-skin")) {
var skin = getCookie("cs-skin");
$("#swicth-style").attr("href", themes[skin]);
$this = $(".li-skinitem span[rel="+skin+"]");
$this.addClass("cs-skin-on");
skin == "dark-hive" ? $(".cs-north-logo").css("color", "#FFFFFF") : $(".cs-north-logo").css("color", "#000000");
}
我把前端工具箱改了一下，支持换肤了。不过皮肤的细节css还需要完善。
前端开发工具
2013-8-21更新
在网上找到一段说是更简单的代码，先贴上来，有时间再研究
代码如下<script>
Cookie =
{
get: function (k) { return ((new RegExp(["(?:; )?", k, "=([^;]*);?"].join(""))).test(document.cookie) && RegExp["$1"]) || ""; },
set: function (k, v, e, d) { document.cookie = [k, "=", v, e && e["toGMTString"] ? ";expires=" + e.toGMTString() : "", ";path=/;domain=", d || ""].join(""); }
};
//写入Cookie
Cookie.set("UserID", "Hello hooyes");
//读取Cookie
var value = Cookie.get("UserID");
alert(value); // Hello hooyes!
</script>