Как сохранить выбранные элементы в куки между страницами? Каждая страница перезаписывает содержимое предыдущей страницы

Question

У меня есть много страниц, на каждой из которых есть флажки.Когда пользователь устанавливает флажок на странице, он записывает значение (идентификатор класса общего ресурса) в basket.Затем basket записывается в файл cookie для извлечения между страницами и обновлениями страниц.

Пользователю должно быть разрешено записывать в cookie не более 5 общих классов.Если пользователь пытается добавить больше, он получает предупреждение, и флажок снят.

Все это управляется скриптом, который перехватывает щелчок, который загружается с каждой страницы.

Проблема в том, что я получаю противоречивые результаты.Если я загружаю страницу A и страницу B вместе, а затем устанавливаю флажок на странице A, класс share добавляется в корзину и записывается в файл cookie.Если я затем установлю флажок на странице B, файл cookie будет перезаписан классом обмена второй страницы.При щелчке другого класса ресурса на странице A файл cookie перезаписывается двумя, которые я щелкнул на странице A, и если я затем щелкаю другой класс ресурса на странице B, файл cookie (теперь содержащий 2 класса общего ресурса со страницы A) перезаписывается двумя классами ресурса со страницы B.1010 * Похоже, что basket объект существует для каждой загруженной страницы, и содержимое каждой является тем, что определяет содержимое cookie.Как сделать так, чтобы между всеми страницами был только 1 глобальный 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