0

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

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

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

所以，我找到了一个jquery.cookie 插件，当有人使用它点击按钮时，我设法开始工作并创建一个 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。我只是不确定如何最好地做到这一点。希望这个问题有意义。

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

4

4 回答 4

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。我正要发布此内容并看到您对我的回复的评论 - 它目前不检查日期现有的 cookie 查看哪个是最旧的，它只使用插槽 1。

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

于 2013-07-10T12:08:43.083 回答
0

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

   $(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});
        }
    });
});
于 2013-07-10T12:04:43.070 回答
0

下面的代码可以帮助你，

$(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 });
        }
    });
});
于 2013-07-10T12:06:44.330 回答
0

由于您不需要在浏览器会话之外保留最后 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);
    });

});
于 2013-07-10T12:18:07.063 回答