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，然后覆盖第二个cookie，依此类推。

Answer 1

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

它会在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.我正准备发布此广告并在我的回复中看到您的评论 - 它没有＆＃39 ; t目前检查现有cookie的日期，看哪个是最早的，它只使用1号槽位。

我可以看到此代码存在潜在问题。从理论上讲，应始终有一个next_cookie_index cookie跟踪下一个，但我想也许在第7天可能存在一些问题，其中cookie已过期，但其他cookie仍然存在。例如，如果他们在前三天后几天添加短语4，前三个将在7天后到期，然后当添加新的时候，你将有第1,4,5位填充因为它将把它放在第一个空闲位置。这是否与您有关或者这个目的是否足够？

Answer 2

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

   $(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 3

下面的代码可以帮助您，

$(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 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);
    });

});

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

4 个答案: