Как сохранить результаты фильтра при выходе из табуляции и возврате?

1

Я фильтрую галерею миниатюр.PDF.

Когда я фильтрую результаты, откройте.pdf, закройте его. Мне нужен экран, чтобы вернуться к результатам фильтра.

На.pdfs будут открываться на той же вкладке.

Функция использует функцию hide и show для фильтрации:

    <script>
        $(document).ready(function () {
            $(".filter-button").click(function () {
                var value = $(this).attr('data-filter');
                if (value == "all") {
                    $('.filter').show('1000');
                }
                else {
                    $(".filter").not('.' + value).hide('3000');
                    $('.filter').filter('.' + value).show('3000');
                    window.scrollTo(500, 0);
                }
            });
            if ($(".filter-button").removeClass("active")) {
                $(this).removeClass("active");
            }
            $(this).addClass("active");
        });
    </script>


 <script>
        // Check if the sessionStorage object exists
        if (sessionStorage) {
            // Store data
            sessionStorage.setItem("filTerm", "activeFilter");
            // Retrieve data
              localStorage.getItem("filTerm") 
        } 
    </script>

Я пытаюсь инициировать хранение сеанса. У меня есть некоторые концепции, но я очень неквалифицирован в JavaScript.

Я думаю, что мне нужно захватить текущую строку фильтра (из функции фильтра), поместить ее в хранилище и затем назначить строку.attr('data-filter'). Эта последняя строка должна помещать сохраненное значение (текущий член фильтра) обратно в функцию фильтра. Как я могу это сделать?

sessionStorage.data-filter = "filTerm"?

Обновление 9/25: я не смог сохранить фильтр. JS в этой скрипке фильтруется, функция поиска едва хромает, конфликты сценариев.

Fiddle находится здесь: https://jsfiddle.net/ewebster/a81v1q46/27/

Я не смог реализовать сценарий Pie Bies в своем ответе ниже, который выглядит так, как будто у него есть механизм для хранения моих фильтров и их реализации при перезагрузке страницы. Я думаю, что я просто не получил имена переменных, чтобы согласиться. Я очень новичок в JavaScript и программировании. Любая помощь, получающая этот код для работы, очень ценится.

  • 0
    Вы можете использовать 'sessionStorage' или 'localStorage', чтобы сохранить, какие фильтры активны до того, как пользователь покинет страницу. Когда пользователь возвращается на страницу, проверьте, есть ли у sessionStorage или localStorage соответствующие сохраненные параметры «фильтра», и при необходимости примените их повторно.
  • 0
    Вы всегда можете сохранить текущую вкладку и открыть PDF-файлы с целевым атрибутом, установленным на = "_blank". Если вы действительно хотите хранить данные, это может помочь developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/…
Показать ещё 1 комментарий
Теги:
filter

1 ответ

1
Лучший ответ

Лучше всего отделить вашу модель, контроллер и просмотр. Это звучит сложно, но на самом деле это не так сложно. В вашем случае все, что вам нужно сделать, это поместить все, что манипулирует вашим пользовательским интерфейсом в другой функции из вашего взаимодействия. Это упрощает чтение кода и поддерживает (скажем, если вы хотите добавить больше отзывов).

Я добавил комментарии в следующий код, чтобы объяснить, что. Если что-то неясно, оставьте комментарий, и я постараюсь лучше объяснить.

$(document).ready(function () {

  //declare a global variable
  var filterVal;
  //check if sessionStorage exists and if so, if there is a var called fillTerm
  //if not, set it to a default value (all)
  if ( sessionStorage && sessionStorage.getItem("filTerm") ){
    filterVal = sessionStorage.getItem("filTerm");
  }  else {
    filterVal = "all";
    sessionStorage.setItem("filTerm", filterVal);
  }

  //now let attach some interaction to our buttons
  $(".filter-btn").on("click", function () {
    //get the value for our filter
    filterVal = $(this).attr("data-filter");
    //store it in the session storage
    sessionStorage.setItem("filTerm", filterVal);
    //call our view update function
    updateView();
  });

  //this is the function that manipulates the UI
  function updateView(){
    //default situation: all is visible
    if( !filterVal || filterVal === "all" ){
      $('.filter').show('1000');
    } 
    //hide all and show filtered values
    else {
      $(".filter").hide('3000');
      $('.filter').filter('.' + filterVal).show('3000');
    }
  };

  //update the view when the page loads
  updateView();

});

Я также создал jsFiddle для иллюстрации кода. Возможно, ваш браузер блокирует ссылки, потому что они запускаются в изолированной программной среде. Если вы разблокируете их, это должно сработать.

Поделиться
  • 1
    Спасибо PieBie, это работает отлично (после того, как я изменю 1 имя переменной). Спасибо за обучение и показ.
  • 0
    Более чем приветствуется. Для будущих посетителей вот чат, полученный в результате этих вопросов и ответов, содержащий дополнительную информацию: chat.stackexchange.com/rooms/66020/room-for-webster-and-piebie
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню