使用Cookie保留网站样式表偏好

我有一个简单的javascript函数，它允许我在我网站的每个页面中的不同样式表之间进行切换。目前，我没有在网站上实施任何cookie，所以无论何时进入新页面，都会加载默认样式表，并且如果用户想要使用替代样式表，他们将被迫再次交换。我想通过使用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>

来源

2014-05-16 Valrok

查看http://stackoverflow.com/questions/1616943/keep-website-theme-the-same-cookies –

所以基于这个链接，我只是使用我目前的功能，但接下来我不确定是set_theme函数。 – Valrok

我会用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也没有自动超时。

来源

2014-05-19 10:57:36

对于如何使用本地存储工作，我确实很好奇。因此，对于storeStyleSheet函数，我只需要放置当前所有不同的样式表，并为每个样式表分配一个唯一的密钥？另外，我是否会创建一个按钮，例如”，以允许用户交替使用？ – Valrok

@valrok我认为你有完全正确的想法。以有意义的方式命名ypur样式表，如通过应用于 –

@Valrok的页面名称，重要的是每个页面都有名称。您可能不想将每个页面的CSS文件硬编码（按键或名称）。此时体系结构取决于您的堆栈。如果您使用的是后端，则应该传递键，否则，您可能希望按页面/视图名称进行散列。我不确定我是否回答你的问题。 –

它可能是最容易在所有的CSS拉（除非它是巨大的），然后/应用主题类的身体，无论你需要它。和你的CSS看起来像

// common and default definitions 

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

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

来源

2014-05-16 16:32:44 negative

如果您希望记住用户而不是浏览器/ IP地址的解决方案（记住每个浏览器都有自己的饼干罐），你可能会在用户的喜好和有关只输出服务器端语言最好写这CSS文件使用一些服务器端处理。

然而，这是一个更大的问题，快速解决问题手头考虑下。

开始通过加载所有的CSS文件，假设他们不是巨大的，它可能会没有太大的差别速度明智的，这将意味着用户可以不用下载额外数据的开销切换。

我戴夫同意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

可能是值得一读的。

来源

2014-05-19 11:45:00

使用Cookie保留网站样式表偏好

回答

相关问题