0

Здравствуйте! Возникла такая проблема, есть скрипт который отвечает за фильтр и загрузку контента, что в этом скрипте изменить чтобы при выборе пункта меню фильтра, при перезагрузки страницы выбранный пункт запоминался.

Сейчас происходит при клике по кнопкам фильтра — составляется переменная uri, которая хранит параметры фильтра (они дописываются к ajax-запросу, и поэтому подгружаются нужный контент).

В скрипте везде, где задается переменная uri, дописать ее сохранение в localStorage. И затем в скрипте в самом начале перед кодом:

// загружаем начальный блок
loadCatalog(0, 1);

сначала считывать uri из localStorage, а затем вызывать loadCatalog.

Как это реализовать?

Вот сам скрипт:

$(document).ready(function() {

    // загружаем начальный блок
    loadCatalog(0, 1);

    // клик на кнопку "Еще"
    $('#more').on('click', function() {
        var showPage = $(this).data('show');
        var preloadPage = parseInt(showPage) + 1;
        loadCatalog(showPage, preloadPage);
    }); 

    // клик по кнопкам сортировки
    $('.sort button').on('click', function() {
        $('.sort button').removeClass('active');
        $(this).addClass('active');
        uri = setAttr('sortby', $(this).data('sort'));
        uri = setAttr('sortdir', $(this).data('sortdir'));
        $('#catalog').html('');
        loadCatalog(0, 1);
        return false;
    });

    // клик по кнопкам фильтра
    $('.filter .filter-group button').on('click', function() {
        var filter_group = $(this).parent('.filter-group');
        var active = $(this).hasClass('active');
        var filter = $(this).data('filter');
        var value = '';
        if (filter == 'category') { // категорий может быть выбрано несколько (checkbox)
            $(this).toggleClass('active');
            var categories = '';
            $('.filter button[data-filter="category"].active').each(function() {
                categories += $(this).data('value') + '|';
            });
            value = categories.substr(0, categories.length - 1);
        }
        else { // остальные фильтры (язык и формат) - только один вариант (radiobutton)
            filter_group.find('button').removeClass('active');
            if (!active) {
                $(this).addClass('active');
                value = $(this).data('value');
            }
        }
        uri = setAttr(filter, value);
        $('#catalog').html('');
        loadCatalog(0, 1);
        return false;
    });
});

function loadCatalog(showPage, preloadPage) {
    // скрываем кнопку "Еще"
    $('#more').hide();

    // показываем блок с ранее загруженным контентом и прокручиваем к нему
    if (showPage != 0) {
        $('#page' + showPage).show('slow');
        $('html,body').animate({ scrollTop: $('#page' + showPage).offset().top - 100 }, 1000);
    }

    // создаем блок под новую загрузку
    $('#catalog').append('<div id="page' + preloadPage + '"></div>');

    uri = setAttr('page', preloadPage);
    // загружаем контент следующей страницы, но не показываем его
    $.ajax({
        url: uri,
        cache: false,
        success: function(html_result) { 
            if (html_result != '') {
                // находим число в теге <div id="total_count" style="display:none;">12</div>
                var total = html_result.match(/<div id="total_count".*?>(.*?)<\/div>/i);
                if (total[1] == '') total[1] = 0;
                $('#total span').html(total[1]);

                //проверЯем, есть ли результаты в полученном ответе
                var is_items = html_result.search(/<div.*?class=".*?list-item.*?"/i);
                if (is_items != -1) {
                    $('#more').data('show', preloadPage);
                    $('#more').show();
                    $('#page' + preloadPage).hide();
                    $('#page' + preloadPage).html(html_result);
                    if (preloadPage == 1) loadCatalog(1, 2);
                }
            }
        }
    });
}

// функция заменяет get-параметр в строке параметров uri (либо добавляет; либо удаляет, если передать val='')

function setAttr(prmName,val) {
    var res = '';
    var d = uri.split("?");  
    var base = d[0];
    var query = d[1];
    if(query) {
        var params = query.split("&");  
        for(var i = 0; i < params.length; i++) {  
            var keyval = params[i].split("=");  
            if(keyval[0] != prmName) {  
                res += params[i] + '&';
            }
        }
    }
    if (val != '') res += prmName + '=' + val;
    return base + '?' + res;
} 

1 ответ 1

2

LocalStorage на пальцах

В вашем случае, если я правильно понял, вам необходимо

localStorage.setItem("storedUri", uri) //пишем
localStorage.getItem("storedUri") // читаем

"storedUri" - произвольное имя ключа, тут вам решать как его назвать

ниже пример

function wrapP(value) { return '<p>' + value + '</p>' };

$('#saveBtn').on('click', function(){
  var uri = $('#someInput').val();
  localStorage.setItem('someKey', uri);
  $('body').append(wrapP('записано: ' + uri));
});

$('#readBtn').on('click', function(){
  var uri = localStorage.getItem('someKey');
  $('body').append(wrapP('прочитано: ' + uri));
});
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <input id="someInput" type="text" placeholder="введите uri">
  <input id="saveBtn" type="button" value="записать в localStorage">
  <input id="readBtn" type="button" value="прочитать из localStorage">
</body>

данный снипет работать не будет из-за политики безопасности данного ресурса но можно попробовать пример на фидле

20
  • Papiroca Спасибо что ответили, ломаю голову уже долгое время, скажите а как это прописать в скрипте, где ключ там что pзначение тоже не понятно? Если возможно приведите пример? 3 окт 2016 в 21:04
  • @Александр tproger.ru/articles/localstorage 3 окт 2016 в 21:18
  • Где это в скрипте прописать, просто вставляю не работает, уверен что я не правильно делаю, опыта мало у меня, приведите пожалуйста пример одну строку со скрипта, где менять или добавить эти строки? 3 окт 2016 в 23:11
  • @Александр что значит "просто вставляю не работает"? вы статью прочитали, которую я вам дал? вы же сами в вопросе написали где вам необходимо сохранить и где прочитать - "В скрипте везде, где задается переменная uri, дописать ее сохранение в localStorage. И затем в скрипте в самом начале перед кодом: // загружаем начальный блок loadCatalog(0, 1);" 3 окт 2016 в 23:40
  • Да статью прочитал, спасибо, просто ссылки не заметил изначально, не получается у меня, если не трудно приведите пж пример, одну строчку из скрипта где задаётся переменная url, с дописанным её сохранением в localStorage, так я хоть пойму о чём речь идёт? 4 окт 2016 в 0:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.