創建新的cookie或添加新的cookie，如果有人使用jquery/javascript（或php？）

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，然後覆蓋第二個，等等。

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。我正要張貼此，看到我的回答您的評論 - 它不目前不檢查現有cookie的日期以查看哪個是最早的，它只是使用插槽1.

我可以看到此代碼的潛在問題。理論上，應該總是有一個跟蹤下一個cookie的next_cookie_index，但我想也許在第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); 
    }); 

});