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

【问题标题】：Read a cookie when implementing inside of another function在另一个函数内部实现时读取 cookie
【发布时间】：2014-05-18 11:55:43
【问题描述】：

我有以下功能来更改我的网站上的样式表，我想使用 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 时，您的意思是类似于以下内容吗？我从这种实现中注意到的是，在交换样式表一次之后，无论出于何种原因，在重新加载页面之前都无法再次交换。

【问题讨论】：

远离 jQuery 有充分的理由，但性能并不是其中之一；如果方便，就去吧。也就是说，this library 很好，而且不是 jQuery 插件。 Consider also localStorage.
同意@minitech，考虑在此处stackoverflow.com/questions/23699556/… 的赏金问题中使用storeStyleSheet 方法

标签： javascript cookies

【解决方案1】：

这是一组普通的 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);
}

【讨论】：

等等，你从我的函数 readcookie("username") 调用究竟是什么意思？我不明白的是“名称”的使用。你是说在我的 if 条件下简单地调用 readCookie(name) ，在这种情况下 name 是 Visitor 或 alternateVisitor？
我编辑了我的代码以更好地展示我在添加到我的代码方面的要求。另外，当我没有真正尝试对它们做任何特定的事情时，我不明白为什么我需要一个函数来创建 cookie。为什么我不应该像现在这样创建它们？
@Valrok - 当您读取 cookie 时，您会读取它的值并使用该值执行某些操作（这就是首先读取它的全部意义）。我给你的readCookie() 函数接受一个参数，即cookie 名称（name=value 的左侧部分），它返回值（name=value 的右侧部分）。在您的示例中，您将执行类似 var name = readCookie("username") 的操作，然后使用 name 变量执行操作。如果您需要进一步的帮助，您需要说明您尝试读取的 cookie 值以及您想用它做什么。

【解决方案2】：

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

（未经测试，请告诉我进展如何。）

【讨论】：