记住不同样式表的 Cookie 问题答案

【问题标题】：Cookie issue with remembering different stylesheets记住不同样式表的 Cookie 问题
【发布时间】：2013-02-26 22:05:54
【问题描述】：

我正在创建一个允许用户更改配色方案和文本大小的网站。我正在使用 cookie，因此当他们更改页面时，它会记住他们选择的配色方案/文本大小。

问题是网站没有同时正确“记住”配色方案和字体。

当只使用其中一种时，它可以正常工作，例如选择配色方案时，它会记住每个页面上选择的配色方案。

但是，当我更改配色方案并尝试更改字体大小时，网站会停止记住所选的配色方案并返回默认配色方案（但会记住文本大小）。

我猜这是因为我设置了两个 cookie 而不是一个，但是在尝试设置一个时我无法让代码工作。

<link class="changeme" rel="stylesheet" type="text/css" href="default.css"      title="Standard" />
<link rel="stylesheet" type="text/css" href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

<!-- Loading Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>
<script>      if($.cookie("css")) {
     $("link.changeme").attr("href",$.cookie("css"));
  }
$(document).ready(function() { 
  $("#nav li a").click(function() { 
     $("link.changeme").attr("href",$(this).attr('rel'));
     $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
 });
</script>
<script>
  if($.cookie("css2")) {
     $("link.changeme").attr("href",$.cookie("css2"));
  }
$(document).ready(function() { 
  $("#resize li a").click(function() { 
     $("link.changeme").attr("href",$(this).attr('rel'));
     $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
  });
 });
</script>

更改样式表

<div id="colourscheme">
<ul id="nav">
<li><a class="colourtext">Colour Scheme: </a></li>
<li><a class="default" href="#" rel="default.css">Default</a></li>
<li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
</ul>

 <!-- Adjust font size -->
<div id="textadjustment">
<ul id="resize">
<li><a class="textsize">Resize Text: </a></li>
<li><a class="small" href="#" rel="default.css">A</a></li>
<li><a class="medium" href="#" rel="large.css">A</a></li>
<li><a class="large" href="#" rel="largest.css">A</a></li>
</ul>
</div>

我还在学习这个，如果回答起来很简单，很抱歉！

【问题讨论】：

两个脚本都设置了“link.changeme”选择器结果的相同 href 属性。所以第一个脚本从“css”加载cookie并将其存储在$（'link.changeme'）的href中，然后第二个脚本从“css2”加载cookie并将其存储在$（'link.changeme'）的href中覆盖那里的内容。
嗯，有道理，你有什么建议我可以解决它吗？感谢您的回复。
感谢您的帮助，但它仍然无法正常工作。我更改了配色方案，工作正常，但是当更改字体大小时，它会跳回默认配色方案。是因为我使用的是两个 cookie 而不是一个？

标签： javascript cookies stylesheet

【解决方案1】：

使用两个样式表引用。

HTML 文档

<!doctype html>
<html>
  <head>
    <link class="colorCss" rel="stylesheet" type="text/css" href="defaultColor.css" />
    <link class="fontCss" rel="stylesheet" type="text/css" href="defaultFont.css" />
    <link rel="stylesheet" type="text/css" 
      href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

    <!-- Loading Javascript -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>

    <script type="text/javascript">      

      if($.cookie("css")) {
        $("link.colorCss").attr("href",$.cookie("css"));
      }

      if($.cookie("css2")) {

        $("link.fontCss").attr("href",$.cookie("css2"));
      }

      $(document).ready(function() { 
        $("#nav li a").click(function() { 
         $("link.colorCss").attr("href",$(this).attr('rel'));
         $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
        });

        $("#resize li a").click(function() { 

         $("link.fontCss").attr("href",$(this).attr('rel'));

         $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
        });
     });
    </script>
  </head>
  <body>
    <div id="colourscheme">
      <ul id="nav">
        <li><span class="colourtext">Colour Scheme: </span></li>
        <li><a class="default" href="#" rel="defaultColor.css">Default</a></li>
        <li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
      </ul>
    </div>

    <div id="textadjustment">
      <ul id="resize">
        <li><span class="textsize">Resize Text: </span></li>
        <li><a class="small" href="#" rel="defaultFont.css">Default</a></li>
        <li><a class="medium" href="#" rel="large.css">Large</a></li>
        <li><a class="large" href="#" rel="largest.css">Largest</a></li>
      </ul>
    </div>
  </body>
</html>

defaultColor.css

body {
  background-color: #aa0000;
  color: #0000aa;
}

defaultFont.css

body {
  font-size: 12px;
}

alternative.css

body {
  background-color: #000;
  color: #aaa;
}

大.css

body {
  font-size: 14px;
}

最大的.css

body {
  font-size: 18px;
}

【讨论】：