Question

我有以下功能来更改我的网站上的样式表，我想使用cookie来保持样式表主题在页面中保持不变。

<script type="text/javascript">
    var i=1;
    function styleSheet(){
        if(i%2==0){
            swapper('css/main.css');    
            document.cookie = "username=Visitor";
        }
        else{
            swapper('css/stylesheetalternate.css'); 
            document.cookie = "username=alternateVisitor";
        }
        i++;
    }
<button onclick="styleSheet()">Click me</button>

我已经在这个功能中设置了我的cookie。我对设置过期日期或类似的东西不太感兴趣，默认对我来说没问题。我想要尝试做的是每次使用我创建的按钮时读取此函数内的cookie。有没有办法在同一个函数中读取它？

我知道存在一个执行此操作的jquery库，但如果我可以使用javascript获得更好的性能，我不想使用jquery。

编辑：

<script type="text/javascript">
    var i=1;
    function styleSheet(){
        if(i%2==0){
            swapper('css/main.css');    
            document.cookie = "username=Visitor";
            readCookie(Visitor);
        }
        else{
            swapper('css/stylesheetalternate.css'); 
            document.cookie = "username=alternateVisitor";
            readCookie(alternateVisitor);
        }
        i++;
    }

当你说在我的函数中使用readCookie时，你的意思是如下所示吗？我从这种实现中注意到的是，在交换样式表一次后，无论出于何种原因，在重新加载页面之前无法再次交换。

Answer 1

document.cookies只是所有Cookie的重要列表。您可以解析它以找到您感兴趣的那个：

function getCookieValue(cookieName) {
    var value = null;
    document.cookie.split(';')
        .forEach(function(pair){
            var pairArray = pair.split('=');
            if (pairArray[0]==cookieName) {
                value = pairArray[1];
            }
        });
    return value;
}

（未经测试，请告诉我它是怎么回事。）

Answer 2

这是一组普通的javascript cookie函数，您可以在任何函数中使用它们。因此，对于您的问题，您可以从函数中调用readCookie("username")（或读取任何其他Cookie值）：

// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/" 
//   and can limit which pages on your site can 
//   read the cookie.
//   By default, all pages on the site can read
//   the cookie if path is not specified
function createCookie(name, value, days, path) {
    var date, expires = "";
    path = path || "/";
    if (days) {
        date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=" + path;
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

在另一个函数内部实现时读取cookie

2 个答案: