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

Create new cookie or add new cookie if one exists using jquery/javascript (or php?)

本文关键字：cookie 存在 如果 添加 创建 jquery javascript php 使用      更新时间：2023-09-26

我创建了一个简单的随机短语生成器，每当用户单击"生成"按钮时，它就会将短语添加到一个空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"分区中的新短语。我想我上面的语句会检查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，然后覆盖第二个cookie，依此类推

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

它自动循环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，因为它将把它放在第一个空闲插槽中。这是否与你有关，或者这是否足以达到目的？

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

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

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

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

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