js操作cookie实现后台管理系统全站样式切换

时间：2022-10-23 14:23:42

        思路就是在主页面通过js来设置cookie，获取cookie，然后在iframe的子页面获取cookie值从而根据值用js获取link标签改变它的href属性来改变样式。

废话不多说，直接上代码。

首先   是主页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="a.css">
    <input type="hidden" value="b">
</head>
<body onload="loadGetCookie()">
    <button class="huanfu">换肤</button>

    <iframe src="getCookie.html" class="hahaha" frameborder="0"></iframe>
    <iframe src="3.html" frameborder="0"></iframe>
<script>
    var inputval;
$(function(){

var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}
$(".huanfu").click(function(){
if($("input").val()=="b"){
$("input").val("a"); //预留变量为a
setCookie("cookie","b.css"); //样式为b.css 即第二套样式
setCookie("variable","a");  //把预留变量设为cookie保存起来
var ysCss = getCookie("cookie"); 
$("link").attr("href",ysCss);
}else{

$("input").val("b");
setCookie("cookie","a.css");
setCookie("variable", "b");
var ysCss = getCookie("cookie");
$("link").attr("href",ysCss);
}
$('.hahaha').attr('src', $('.hahaha').attr('src')); //刷新iframe子页面获取最新的页面cookie样式信息
})
})
function loadGetCookie(){
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}
var ysCss = getCookie("variable"); //页面刷新时获取预留变量值的cookie值
            //alert(ysCss);
if(ysCss == null){//如果预留变量值为null则使用默认样式  即a.css
setCookie("cookie","a.css");
setCookie("variable", "b");
var ysCssskin = getCookie("cookie");
$("link").attr("href",ysCssskin);
}else{

setCookie("cookie","b.css");
var ysCssskin = getCookie("cookie");
//alert(ysCssskin);
$("link").attr("href",ysCssskin);
}
//刷新页面时获取预留变量的cookie值。这个变量值非常重要 是切换样式的关键 起承上启下的作用，当预留变量值为a时页面用的是b.css样式，当为b时用的是a.css样式
if(ysCss=="a"){

$("input").val("a");
}else{
$("input").val("b");
}
}

</script>
</body>
</html>


html没多少代码 就不讲了  直接从js代码开始：
//JS操作cookies方法!
                        var username=document.cookie.split(";")[0].split("=")[1];
//设置cookie
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
                        //获取cookie
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}

这些不懂也没关系，只需要复制粘贴上了，还有删除cookie的代码就不贴了，当然感兴趣的可以自己去问度娘。接下来这一部分就比较重要了：
                       $(".huanfu").click(function(){
if($("input").val()=="b"){
$("input").val("a"); //预留变量为a
setCookie("cookie","b.css"); //样式为b.css 即第二套样式
setCookie("variable","a");  //把预留变量设为cookie保存起来
var ysCss = getCookie("cookie"); 
$("link").attr("href",ysCss);
}else{

$("input").val("b");
setCookie("cookie","a.css");
setCookie("variable", "b");
var ysCss = getCookie("cookie");
$("link").attr("href",ysCss);
}
$('.hahaha').attr('src', $('.hahaha').attr('src')); //刷新iframe子页面获取最新的页面cookie样式信息
})



通过一个隐藏的input框的value值来进行样式的切换，其实就是通过value的值来判断再次点击按钮时改变的样式，这方法我一直屡试不爽。最后要注意点击换肤按钮后要使iframe子页面刷新，这样他才能从cookie中获取要更改的样式名称，否则还是显示默认的引入样式。
接下来是iframe子页面里面的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="a.css">
<script src="jquery-1.9.1.min.js"></script>

</head>
<body>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <script src="cookie.js"></script>
</body>
</html>

子页面的cookie.js页面：
        function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null)
    return unescape(arr[2]);
    return null;
}
        var ysCss = getCookie("cookie");
$("link").attr("href",ysCss);
其实和主页面的js差不多相同，只不过这个页面是iframe子页面的公共方法，哪个页面需要改变直接引入这个js文件就可以了，好了，大功告成~~第一次写博客，有不懂的地方或理解不清楚的地方请多多原谅~~~ 这格式好难写啊。

  
  


标签：
相关文章