javascript - 离开选项卡并返回时如何维持过滤结果？

Question

我正在过滤 .PDF 缩略图库。

当我过滤结果时，打开一个 .pdf，然后关闭它我需要屏幕返回到过滤结果。

.pdf 文件设置为在同一选项卡中打开。

该函数使用隐藏和显示进行过滤:

    <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>

我正在尝试启动 session 存储。我掌握了一些概念，但对 JavaScript 非常不熟练。

我认为我需要的是获取当前过滤字符串(来自过滤函数)，将其放入存储中，然后将字符串分配给 .attr('data-filter')。最后一行应该将存储的值(当前过滤器项)放回过滤器函数中。我该怎么做？

sessionStorage.data-filter = "filTerm"?

9 月 25 日更新:我没有实现保存过滤器。这个 fiddle 中的 JS 正在过滤，搜索功能几乎一瘸一拐，脚本冲突。

fiddle 在这里:https://jsfiddle.net/ewebster/a81v1q46/27/

我无法在他下面的回答中实现 Pie Bies 脚本，看起来它具有存储我的过滤器并在页面重新加载时实现它们的机制。我想我只是没有让变量名一致。我是 JavaScript 和编程的新手。非常感谢任何使此代码正常工作的帮助。

Answer 1

最好将模型、 Controller 和 View 分开。这听起来很复杂，但实际上并不难。在您的情况下，您需要做的就是将所有操作您的 UI 的东西放在与您的交互不同的功能中。这使代码更易于阅读和维护(例如，如果您想添加更多反馈)。

我在下面的代码中添加了注释来解释什么是什么。如果有什么不清楚的地方，请发表评论，我会尽力解释得更好。

$(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's 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来说明代码。可能是您的浏览器阻止了这些链接，因为它们在沙盒中运行。如果你取消阻止它们，它应该可以工作。