使用Cookie在网站上保留样式表偏好设置

问题描述

我有一个简单的javascript函数，它允许我在我的网站的每一页的不同样式表之间切换。目前我没有在网站上实现任何cookie，所以每当我去一个新的页面，默认样式表被加载，如果用户想使用备用样式表，他们将被迫重新交换。我想通过使用cookie，在任何样式表，用户选择将保持到不同的页面。

I've got a simple javascript function which allows me to swap between different stylesheets in each page of my website. At the moment I don't have any cookies being implemented on the site so whenever I go to a new page the default stylesheet is loaded and if a user wanted to use the alternate stylesheet they would be forced to swap again. I want to make it to where by using cookies, whatever stylesheet the user chooses will remain when going to a different page.

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

Below I've got the following code which is my method of swapping stylesheets.

<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>

到目前为止，我还没有得到它的网页会记住用户选择的地方作为它们的样式表主题，当重新加载页面时保持相同的样式表。这是我第一次使用cookies，我大多只是在寻找一种方式来实现这个与我原来的javascript。

So far I haven't been able to get it to where the webpage would remember what the user chose as their stylesheet theme and when reloading the page keep the same stylesheet. This is my first time working with cookies and I'm mostly just looking for a way to implement this with my original javascript.

编辑：也正如一个头，我只知道这一点上的前端Web编程。基于Dave A的答案，我将适应我目前的styleSheet（）函数如下，或者这甚至不再有必要了吗？有一件事我很难理解这个键是如何工作的。

Also just as a heads up, I only know front end web programming at this point. Based on Dave A's answer, would I adapt my current styleSheet() function as follows or is this not even necessary anymore? One thing I've had a bit of a hard time understanding is how the key works.

<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>

推荐答案

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

使用以下函数存储用户的选择：

Store the user's selection with a function like:

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

拉取并使用存储的CSS，如果有一个：

And pull and use the stored CSS, if there is one:

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

我发现本地存储 比Cookie更容易使用。我没有任何问题使用 localStorage 在任何浏览器。而且界面直观;只要知道，如果文件/ keyname从来没有存储，它将返回'未定义'或未定义。也不会自动超时 localStorage 。

I have found HTML 5 local storage to be easier to use than cookies. I have not had any problems using localStorage on any browser. And the interface is intuitive; just be aware that if the file/keyname was never stored before, it will return 'undefined' or undefined. There is also no automatic timeout with localStorage.

这篇关于使用Cookie在网站上保留样式表偏好设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！