使用Cookie保留整个网站上的样式表首选项

Question

我有一个简单的JavaScript函数，可让我在网站的每个页面中的不同样式表之间进行交换。 目前，我的网站上没有任何Cookie，因此，每当我转到新页面时，都会加载默认样式表，并且如果用户要使用备用样式表，则将不得不再次交换它们。 我想通过使用cookie使其到达某个位置，当用户转到另一个页面时，用户选择的任何样式表都将保留。

在下面，我有以下代码，这是我交换样式表的方法。

<script type="text/javascript">
    var i=1;
    function styleSheet(){
        if(i%2==0){
            swapper('css/main.css');            
        }
        else{
            swapper('css/stylesheetalternate.css');             
        }
        i++;
    }
</script> 
<script>
    function swapper(select_sheet){
        document.getElementById('swapper').setAttribute('href', select_sheet);
    }
</script>

到目前为止，我还无法到达网页会记住用户选择的样式表主题的位置，并且在重新加载页面时仍保持相同的样式表。 这是我第一次使用Cookie，而我主要只是在寻找一种使用原始javascript实现此方法的方法。

编辑：也是一个提示，我现在只知道前端Web编程。 根据Dave A的回答，我是否可以按如下方式调整当前的styleSheet（）函数，还是不再需要它了？ 我很难理解的一件事是密钥的工作方式。

<script type="text/javascript">
    var i=1;
    function styleSheet(){
        if(i%2==0){
            storeStyleSheet(sheet1, main.css);
        }
        else{
            storeStyleSheet(sheet2, alternate.css);             
        }
        i++;
    }
</script> 
<button onclick()="setStoredStyleSheet (styleSheetKey)">click here</button>

Answer 1

我将使用HTML 5本地存储来存储CSS文件名：

使用以下功能存储用户的选择：

    function storeStyleSheet(styleSheetKey, StyleSheetName){
       localStorage.setItem(styleSheetKey, StyleSheetName);
    }

并使用已存储的CSS（如果有的话）：

    function setStoredStyleSheet(styleSheetKey){
    var styleSheet = localStorage.getItem(styleSheetKey);
        if(!(styleSheet=='undefined' || styleSheet==undefined) ){
            swapper(styleSheet);            
        }
        else{
            swapper('css/stylesheetalternate.css');             
        }
    }

我发现HTML 5本地存储比cookie更易于使用。 我在任何浏览器上使用localStorage都没有任何问题。 界面直观； 请注意，如果以前从未存储过文件/密钥名，它将返回“未定义”或未定义。 localStorage也没有自动超时。

Answer 2

插入所有CSS（除非非常庞大），然后将主题类应用于主体/您需要的任何地方，这可能是最容易的。 而且您的CSS看起来像

// common and default definitions

body.some-theme{
  // theme overrides of default go here
}

body.some-other-theme{
  // another theme
}

Answer 3

如果您想要一个能够记住用户而不是浏览器/ ip地址的解决方案（记住每个浏览器都有自己的cookie罐），则最好使用具有用户首选项的服务器端语言编写此代码，并且仅使用一些输出相关的CSS文件服务器端处理。

但是，这是一个更大的问题，要快速解决眼前的问题，请考虑以下内容。

首先加载所有CSS文件，假设它们不是很大，那么速度上的差别可能并不大，这意味着用户可以切换而无需下载额外数据。

我同意Dave A的观点，localStorage方法可能是存储此信息的最佳方法（没有服务器存储用户首选项）。 因此，我建议您编写类似于以下内容的内容，我确信这很明显，因此我将其归为一类。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .default {
        background-color: blue;
      }

      .alternative {
        background-color: red;
      }
    </style>
    <script type='text/javascript'>
      function init() {
        if (localStorage.getItem('cssName') !== "default") {
          var i = 0;
          var elems = [];
          var elements = document.getElementsByClassName('default');

          // Put the elements into an easy to interate array instead of HTML Collection.
          for (i = 0; i < elements.length; i++) {
            elems.push(elements[i]);
          }

          // Iterate over the new nice array.
          elems.forEach(function(element, index, array) {
            element.setAttribute('class', 'alternative');    
          });
        }
      }
    </script>
  </head>

  <body onload='init();'>
    <div class='default'>hbdfisubfiuodfhriubsrfiub</div>
    <div>iboufruewhiobieiohhbefpijbepojb</div>
    <div class='default'>hbdfisubfiuodfhriubsrfiub</div>
    <div>iboufruewhiobieiohhbefpijbepojb</div>
    <div class='default'>hbdfisubfiuodfhriubsrfiub</div>
    <div>iboufruewhiobieiohhbefpijbepojb</div>
    <div class='default'>hbdfisubfiuodfhriubsrfiub</div>
    <div>iboufruewhiobieiohhbefpijbepojb</div>
  </body>
</html>

如果您希望沿本地存储路线走，我忘了提一下： http : //mozilla.github.io/localForage/?javascript#localforage

可能值得一读。

使用Cookie保留整个网站上的样式表首选项

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-05-19 10:57:36

解决方案2
0 2014-05-16 16:32:44

解决方案3
0 2014-05-19 11:45:00

使用Cookie保留整个网站上的样式表首选项

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-05-19 10:57:36

解决方案2 0 2014-05-16 16:32:44

解决方案3 0 2014-05-19 11:45:00

解决方案1
3 已采纳 2014-05-19 10:57:36

解决方案2
0 2014-05-16 16:32:44

解决方案3
0 2014-05-19 11:45:00