Хранение элементов в виде файлов cookie, прекрасно работает в обычном браузере, но в браузере нативного устройства есть некоторые последствия - PullRequest
0 голосов
/ 20 сентября 2019

В данный момент я создаю веб-сайт для клиента, и мы решили, что простым способом хранения «элементов», которые будут передаваться на поддомен из корня, будет хранение их в виде файлов cookie.Это прекрасно работает в обычном браузере, но когда я тестировал его в родном браузере, он работал не так гладко.Мне интересно, откуда могли возникнуть некоторые из этих проблем, и надеюсь, что вы, замечательные разработчики, сможете помочь человеку.Идея состоит в том, что на веб-интерфейсе, когда нажимается боковой ящик «Ваш заказ», запускается функция захвата файлов cookie, а затем сортировка их в указанные области содержимого -> Загружаемый контент, Запрошенный материал и Заказной контент.Для этого я создал две отдельные функции, одна из которых была исходной рабочей частью, а другая более специализированной и «хорошей практикой».

Попытка получить «Значение» файла cookie, содержащего значения, которые необходимо сохранить, напримерas, [itemname], [itemlocation], [itemdescription], [itemtype].Вторая функция хранит данные элемента в объекте, затем объект JSON.stringified и повторяется в цикле for.Затем он извлекается из строки с помощью JSON.parse () и далее повторяется в .each (), повторяя индекс (ключ) и val (значение).

FIRST FUNCTION:

$('section#review-downloads a.toggle-btn').bind('click tap', function() {
        let cookies;
        let itemSplit;
        var section = $('section#review-downloads');
        if(section.hasClass('active')) {
            section.removeClass('active');
            setTimeout(function() {
                $('section#review-downloads .selected-items div').find('p').remove();
            }, 900);
        } else {
            section.addClass('active');
            $.each(document.cookie.split(';'), function() {
                cookies = this.split('=');
                let trimId = cookies[0].trim();
                vals = cookies[1].replace(/[\])}[{(]/g, '');
                if(!(cookies[0] === "envFilter")) {
                    $.each(vals.split('[ ]'),function() {
                        itemSplit = this.split(',');
                        let itemId = trimId;
                        let itemName = itemSplit[0];
                        let itemUrl = itemSplit[1];
                        let itemType = itemSplit[2];
                        let itemDesc = itemSplit[3];
                        if(itemType === ' Downloadable Content ') {
                            $('<p id="selected-item-'+itemId+'"><strong>'+itemName+'</strong>'+itemDesc+'</p>').appendTo('section#review-downloads .review-container .selected-items .downloadable-content');
                        } else if (itemType === ' Requested Materials ') {
                            $('<p id="selected-item"><strong>'+itemName+'</strong>'+itemDesc+'</p>').appendTo('section#review-downloads .review-container .selected-items .requested-material');
                        } else if (itemType === ' Bespoke Content ') {
                            $('<p id="selected-item"><strong>'+itemName+'</strong>'+itemDesc+'</p>').appendTo('section#review-downloads .review-container .selected-items .bespoke-content');
                        }
                    });
                };
            });
        } 
        return false;
    });

ВТОРАЯ ФУНКЦИЯ (лучшая практика)

$('div.support-item-wrapper div.order-add').bind('click tap', function() {
        let id = $(this).data('id');
        let name = $(this).data('title');
        let file = $(this).data('file');
        let type = $(this).data('type');
        let desc = $(this).data('description').replace(/(\r\n|\n|\r)/gm, "");
        let url = $(this).data('url');

        let cookieVal = {
            name: name,
            file: file,
            type: type,
            desc: desc,
            url: url
        };
        let string = JSON.stringify(cookieVal);
        setCookie('product-'+id, string, 1);
    });

    $('section#review-downloads a.toggle-btn').bind('click tap', function() {
        var section = $('section#review-downloads');
        if(section.hasClass('active')) {
            section.removeClass('active');
        } else {
            section.addClass('active');
            let decoded_user_product;
            cookie_values = document.cookie.split(';');
            for(i = 0; i < cookie_values.length; i++) {
                cookie_split = cookie_values[i].split("=");
                cookie_key = cookie_split[0].trim();
                cookie_value = cookie_split[1].trim();
                // console.log(cookie_value);
                if(cookie_key != "envFilter") {
                    decoded_user_product = JSON.parse(cookie_value);
                }
                $.each(decoded_user_product, function(index, val) {
                    // console.log("index:" + index + "& val:" + val);
                    if(index === "name") {
                        console.log(val);
                    } else if (index === "type") {
                        console.log(val);
                    } else if (index === "desc") {
                        console.log(val);
                    }
                });
            }
            // console.log(decoded_user_product);
        };
    });

На рабочем столе результаты на отлично.Каждый элемент легко доступен для console.log () и легко сортируется в ПЕРВОЙ ФУНКЦИИ.На Mobile такие же результаты, как и следовало ожидать.Но после осознания того, что это не сработало, я использовал chrome: // inspect вместе со многими консольными журналами, чтобы прийти к выводу, что я, возможно, слишком неопытен, чтобы понять, какие части моего кода не могут работать в собственном браузере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...