如何在頁面之間維護cookie中的選定項目？每頁都覆蓋前一頁的內容

Question

我有許多頁面，每個頁面上都有複選框。當用戶點擊頁面上的複選框時，它會將值（共享類ID）寫入basket。然後將basket寫入cookie以便在頁面刷新頁面之間進行檢索。

用戶只能被允許最多寫5個共享類到cookie中。如果用戶嘗試添加更多，他們會收到警報，並且複選框未被選中。

這是全部由攔截每個頁面加載的點擊的腳本管理的。

問題是我得到的結果不一致。如果我一起加載pageA和pageB，然後單擊pageA中的複選框，則shareclass將被添加到購物籃並寫入cookie。如果我然後單擊pageB中的複選框，則Cookie將被第二頁的共享類覆蓋。單擊pageA上的另一個共享類將覆蓋cookie，其中2我單擊了pageA，如果我然後單擊pageB中的另一個共享類，cookieB（現在包含pageA中的2個共享類）將被pageB中的2個共享類覆蓋。

似乎每個加載的頁面都存在一個basket對象，每個頁面的內容都決定了cookie的內容。我怎樣才能讓所有頁面之間只有一個全局對象basket？

以下代碼在每個頁面加載上運行。

var basket = {}; 

jq15(document).ready(function ($) { 
    initialiseCookieKeepAlive(); 

    $('.fund-compare-check-box').live('click', function() { 

     if (basket[$(this).val()]) { 
      // if the basket already contains a Share Class, remove it 
      RemoveShareclassFromBasket($, $(this).val()); 

     } else { 

      var cookie = getCookie("fund_basket"); // get the cookie 
      if (cookie) { // the cookie isn't empty 
       if (cookie.split(".").length < 5) { 
        // if the basket isn't full, add the share class 
        basket[$(this).val()] = $(this).val(); 
       } else { 
        alert("You have selected the maximum number of share classes"); 
        return false; 
       } 
      } else { // the cookie is empty, so just add the share class 
       basket[$(this).val()] = $(this).val(); 
      } 
     } 

     // when I've added or removed the share class, 
     // I want to replace the cookie with 
     // the latest contents of the basket. 
     WriteBasketToCookie(); 
    }); 
}); 

function initialiseCookieKeepAlive() { 

    // this function is because they want the basket to last as long 
    // as they have any of the relevant pages open, but not 
    // the other pages in the site. That's why I didn't create a 'session' cookie 

    keepCookieAlive("fund_basket"); 
    setInterval(function() { 
     keepCookieAlive("fund_basket"); 
    }, 5 * 1000); 
} 

function keepCookieAlive(cookie) { 
    if (getCookie(cookie)) { 
     document.cookie = cookie + "=" + getCookie(cookie) + ";expires=" + getTime() + ";path=/"; 
    } 
} 


function RemoveShareclassFromBasket($, shareClassId) { 
    delete basket[shareClassId]; 
    WriteBasketToCookie(); 
} 

function WriteBasketToCookie() { 
    var arr = new Array(); 
    for (shareClass in basket) { 
     if (!isNaN(shareClass)) { 
      arr.push(basket[shareClass]); 
     } 
    } 

    document.cookie = "fund_basket=" + arr.join('.') + ";expires=" + getTime() + ";path=/"; 
} 

function getCookie(c_name) { 
    var i, x, y, ARRcookies = document.cookie.split(";"); 
    for (i = 0; i < ARRcookies.length; i++) { 
     x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
     y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
     x = x.replace(/^\s+|\s+$/g, ""); 
     if (x == c_name) { 
      return unescape(y); 
     } 
    } 
} 

function ReCheckBoxes($) { 
    if (getCookie("fund_basket")) { 
     var cookie = getCookie("fund_basket").split("."); 
     $('.fund-compare-check-box').attr('checked', false); 

     for (var idx in cookie) { 
      basket[cookie[idx]] = cookie[idx]; 
     } 

     $('.fund-compare-check-box').each(function() { 
      for (var idx in cookie) { 
       if (cookie[idx] == $(this).val()) { 
        $(this).attr('checked', true); 
       } 
      } 
     }); 
    } else { $('.fund-compare-check-box').attr('checked', false); } 
} 

function getTime() { 

    var today = new Date(); 
    today.setTime(today.getTime()); 

    var expires = 20 * 1000; 
    var exdate = new Date(today.getTime() + (expires)); 

    return exdate.toUTCString(); 
} 

Answer 1

這周有過類似的問題。我不得不在我的cookie中存儲一組數據。這是我做到的。請介意我使用jQuery的$ .cookie插件（https://github.com/carhartl/jquery-cookie）

var ArrayCookie = function() { 
    var cookieName = 'your_cookie_name_here'; 
    var cookie = $.cookie(cookieName, { path: '/' }); 
    var store = (cookie) ? JSON.parse(cookie) : []; 

    return { 
     add: function (title, text) { 
      var new_Item = { 
       title: title, 
       text: text 
      }; 
      store.push(new_Item); 
      this.save(); 
     }, 
     remove: function (index) { 
      store.splice(index, 1); 
      this.save(); 
     }, 
     count: function() { 
      if (this.list() == null || this.list().length < 1) 
       return 0; 
      return this.list().length; 
     }, 
     list: function() { 
      return store; 
     }, 
     save: function() { 
      $.cookie(cookieName, JSON.stringify(store), { path: '/' }); 
     } 
    }; 
}; 

例如：

var cookie = new ArrayCookie(); 
cookie.list();         // returns the array 
cookie.remove(1);      // remove's item on index 1 
cookie.add('title', 'some text');  // add's new item 

對於IE也需要包含此JavaScript文件以支持json https://github.com/douglascrockford/JSON-js/blob/master/json2.js