Jquery的持久样式表切换器

Question

我正在推出我公司维护的Web应用程序的新样式，并希望为用户提供恢复到之前样式的选项。

我已经将表单切换得很好，但是当导航到不同的页面时，它会恢复到新的样式表。

我希望它保持用户选择使用的样式表，但我不知道如何实现这一点。

我的代码：

<link rel="stylesheet" href="/Assets/css/style.css" id="style"/> 
<link rel="stylesheet" href="/Assets/css/colors.css" id="colors"/> 
<link rel="stylesheet" href="/Assets/css/jquery.datepicker.css" id="datepicker"/> 

<!--View Switch--> 
    <div id="view"> 
    <button id="new" class="new">Switch to Classic View</button> 
<script type="text/javascript"> 
    $("#new").click(function() { 
     jQuery('#style').remove(); 
     $('head').append('<link href="/Assets/css/style.old.css" rel="stylesheet" id="oldstyle" />'); 
     jQuery('#colors').remove(); 
     $('head').append('<link href="/Assets/css/colors.old.css" rel="stylesheet" id="oldcolors" />'); 
     jQuery('#datepicker').remove(); 
     $('head').append('<link href="/Assets/css/jquery.datepicker.old.css" rel="stylesheet" id="olddatepicker" />'); 
    }); 
</script> 
    <button id="old" class="old">Switch to Updated View</button> 
    <script type="text/javascript"> 
     $("#old").click(function() { 
      jQuery('#oldstyle').remove(); 
      $('head').append('<link href="/Assets/css/style.css" rel="stylesheet" id="style" />'); 
      jQuery('#oldcolors').remove(); 
      $('head').append('<link href="/Assets/css/colors.css" rel="stylesheet" id="colors" />'); 
      jQuery('#olddatepicker').remove(); 
      $('head').append('<link href="/Assets/css/jquery.datepicker.css" rel="stylesheet" id="datepicker" />'); 
     }); 
</script> 
</div> 
<!-- End View Switch --> 

Answer 1

尝试设置一个cookie，这是做到这一点的最佳方式，它也将让他们离开现场，并保存修改回来。

setCookie ('stylesheet', 1, 60 * 60 * 24 * 365); //Sets cookie with a value of 1 valid for 1 year 

var style = getCookie('stylesheet'); //Gets cookie value 
document.getElementById("css").href="css" + style + ".css";