如果存在使用 jquery/javascript（或 php？）创建新 cookie 或添加新 cookie

Question

我创建了一个简单的随机短语生成器，每次用户单击“生成”按钮时，它都会将短语添加到一个空的 div 中。每次单击都会重新生成短语。这部分就像一个魅力。

我想显示每个特定人员生成的最后 5 个短语（不是网站的最后 5 个用户生成的）。也就是说，显示用户每次单击“生成”按钮时生成的最后五个短语的结果。

我认为（也许是错误的）最简单的方法是为每个生成的短语创建一个 cookie，然后只显示每个这些 cookie 的内容。

所以，我找到了一个jquery.cookie plugin，当有人使用此按钮单击按钮时，我设法开始工作并创建了一个 cookie：

$(document).ready(function(){
$("#button").click(function () {
$.cookie('cookie_1', $('#phrase_here').text(), { expires: 7 });
})
});

问题是我想存储最后五个短语。使用上述方法，每次点击都会覆盖 cookie。所以，我认为这样的事情会起作用：

if($.cookie('cookie_1') == null) {
$(document).ready(function(){
$("#button").click(function () {
$.cookie('cookie_1', $('#phrase_here').text(), { expires: 7 });
})
});
}
else{
$("#button").click(function () {
$.cookie('cookie_2', $('#phrase_here').text(), { expires: 7 });
})
};

但这就是正在发生的事情。我单击按钮，cookie_1 设置为 div“#phrase_here”中的文本。如果我再次单击该按钮，cookie_1 将更改为“#phrase_here”div 中的新短语。我认为我上面的语句会检查 cookie_1 是否存在，如果存在，则创建一个新的、不同的 cookie (cookie_2)。如果我单击按钮并重新加载页面，cookie_1 仍然设置。但是，如果我单击该按钮，它会设置 cookie_2 而不是 cookie_1。不知道为什么需要重新加载页面才能导致这种行为（这是我想要的）。

最终，我想使用相同的逻辑存储 5 个 cookie，如果没有 cookie，则创建一个。有5个之后，再覆盖cookie_1。不知道在那之后做什么，因为我认为我不能写一些会覆盖 cookie_2 的东西。

显然，有更好的方法来做到这一点。尽量避免使用数据库并在浏览器中完成所有操作。我知道这限制了可能性，并且不会对每个人都有效，但这没关系。现在只是一个实验。

我愿意使用 JavaScript、jQuery 或必要时使用 PHP。我只是不确定如何最好地做到这一点。希望这个问题有意义。

更新：This code 可以很好地创建五个 cookie 而不会覆盖。现在的诀窍是如何在创建五个 cookie 后覆盖第一个 cookie，然后覆盖第二个，依此类推。

Answer 1

你的代码对我来说似乎有点奇怪...... 如果你这样尝试：

   $(document).ready(function() {

    $("#button").click(function() {
        if ($.cookie('cookie_1') == null) {
            $.cookie('cookie_1', $('#phrase_here').text(), {expires: 7});
        }
        else {
            $.cookie('cookie_2', $('#phrase_here').text(), {expires: 7});
        }
    });
});

Answer 2

以下代码可能对您有所帮助，

$(document).ready(function(){
    $("#button").click(function () {
        if($.cookie('cookie_1') == null) {//if cookie 1 is not set  
            $.cookie('cookie_1', $('#phrase_here').text(), { expires: 7 });
        }
        else if($.cookie('cookie_2') == null){//if cookie 2 is not set
            $.cookie('cookie_2', $('#phrase_here').text(), { expires: 7 });
        }
        else if($.cookie('cookie_3') == null){//if cookie 3 is not set
            $.cookie('cookie_3', $('#phrase_here').text(), { expires: 7 });
        }
        else if($.cookie('cookie_4') == null){//if cookie 4 is not set
            $.cookie('cookie_4', $('#phrase_here').text(), { expires: 7 });
        }
        else if($.cookie('cookie_5') == null){//if cookie 5 is not set
            $.cookie('cookie_5', $('#phrase_here').text(), { expires: 7 });
        }
    });
});

Answer 3

我已经用下面的代码完全替换了我原来的答案。

它会在 5 之后自动循环后轮，并跟踪它最后在哪一个。

$(document).ready(function(){
    $("#button").click(function () {
        setPhraseCookie();
    });
});

function setPhraseCookie() {
    var cookieIndex = getNextPhraseCookieIndex();
    var cookieName = 'cookie_'.concat(cookieIndex);
    $.cookie(cookieName, $('#phrase_here').text(), { expires: 7 });
    $.cookie("next_cookie_index", ++cookieIndex, { expires: 7 });
}

function getNextPhraseCookieIndex() {
    // first check cookie index exists
    var cookieIndex = $.cookie('next_cookie_index');
    if (cookieIndex != null) {
        return cookieIndex % 5; // set to number of phrase slots in use
    }

    // then check for first empty slot
    for(var i = 1; i <= 5; i++) {
        if($.cookie('cookie_'.concat(i)) == null) {  
            return i;
        }
    }

    // then fall back on first slot
    return 1;
}

注意：如果它无法确定要填充哪一个并且所有 5 个插槽都已满，则默认使用插槽 1。我正要发布此内容并看到您对我的回复的评论 - 目前未检查现有 cookie 的日期以查看哪个是最旧的，它只使用插槽 1。

我可以看到此代码存在潜在问题。理论上，应该总是有一个next_cookie_index cookie 跟踪下一个，但我认为也许在第 7 天可能会出现一些问题，即 cookie 已过期但其他 cookie 仍然存在。例如，如果他们在前三个之后的几天添加了短语 4，那么前三个将在 7 天后过期，然后当添加一个新的时，您将填充插槽 1、4、5，因为它会将其放在第一个空闲插槽中。这是否与您有关，或者这是否足以达到目的？

Answer 4

由于您不需要在浏览器会话之外保留最后 5 个短语（根据您的评论），您可以将这些值存储在内存中吗？

$(document).ready(function () {

    var game = (function () {

        var phrases = [];

        return {

            store: function (phrase) {
                phrases.push(phrase);
                game.refresh();
            },

            refresh: function () {
                // clear your container displaying the last 5 phrases
                // loop over phrases 0-5 and display in your container
            }
        };

    }());

    $('#button').click(function (e) {
        e.preventDefault();
        var phrase = $('#phrase_here').text();
        game.store(phrase);
    });

});