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实现这一点。

编辑：同样只是一个抬头，我现在只知道前端网络编程。基于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（除非它很大）然后将主题类应用到body /您需要的任何地方。你的CSS看起来像

// common and default definitions

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

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

Answer 3

如果你想要一个能够记住用户而不是浏览器/ ip地址的解决方案（记住每个浏览器都有自己的cookie jar），你最好用服务器端语言编写这个用户首选项，并输出相关的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 个答案: