如何在 Jquery 选择/选项过滤系统中保留最后的首选项？

Question

基于更改选择选项，我发现了一个非常有用的Jquery example to filter divs。

这里是小提琴：https://jsfiddle.net/vgdwyqxb/

我的问题是： 我使用此代码过滤项目，每个项目都有一个指向另一个页面的 URL。当用户点击一个项目时，他/她会进入项目详情页面。在这些页面上，有一个“返回”按钮。当它们返回时，所有过滤选择都将丢失。我想保留过滤器选择。

我在其他页面添加了一个 goBack() 方法返回过滤页面。当我点击 goback 时，过滤页面会记住选择了哪个选项，但会出现所有 div（不过滤 div）。据我所知，必须进行“更改选项”才能过滤 div，所以当我返回过滤页面时，即使选择了我最后选择的选项，它也不再过滤。

我的问题是：当用户从项目详细信息页面返回时，我应该怎么做才能让过滤页面记住？

提前致谢。

jQuery('#selectContainer select').on('change', function() {
var color = jQuery('#select-1').val();
var shape = jQuery('#select-2').val();
var style = jQuery('#select-3').val();


  jQuery('div.object').hide();
  
  jQuery('div.object').each(function() {
    if(jQuery(this).hasClass(color) && jQuery(this).hasClass(shape) && jQuery(this).hasClass(style)) {
    jQuery(this).show();
    }
  });
  
});


//$( document ).ready(function() {
$('#btnAuckland').click(function(){ 

    $('#select-1').val('Red').trigger('change');
})

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
        <option value="allColors">All</option>
        <option value="Red">Red</option>
        <option value="Blue">Blue</option>
    </select>
    <select name="select-2" id="select-2">
        <option value="allShapes">All</option>
        <option value="Square">Square</option>
        <option value="Circle">Circle</option>
    </select>
    <select name="select-3" id="select-3">
        <option value="allStyles" selected>All</option>
        <option value="Solid">Solid</option>
        <option value="Outline">Outline</option>
    </select>
</div>
    <hr />
    <div class="object allColors allShapes allStyles Red Square Solid">
        <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
    </div>
    <div class="object allColors allShapes allStyles Red Square Outline">
        <p>This is a red, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Solid">
        <p>This is a solid, red circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Outline">
        <p>This is a red, circle outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Solid">
        <p>This is a solid, blue square.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Outline">
        <p>This is a blue, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Solid">
        <p>This is a solid, blue circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Outline">
        <p>This is a blue, circle outline.</p>
    </div>

Answer 1

为了实现您的目标，您可以使用 localStorage() 保存一个 JSON 编码的字符串，其中包含从三个过滤器 select 元素中做出的最后选择。

页面加载后，您可以检索该 JSON，将所选值应用回 select 并再次过滤内容。 执行此操作的代码如下所示：

// Save the selected values to JSON in localStorage
let saveObjectFilterSettings = () => {
  let filters = $('#selectContainer select').map((i, el) => ({
    id: el.id,
    val: el.value
  })).get();
  localStorage.setItem('filter', JSON.stringify(filters));
}

// Retrieve the filter JSON from localStorage and apply it to the DOM
let retrieveObjectFilterSettings = () => {
  let filters = JSON.parse(localStorage.getItem('filter') || '[]');
  filters.forEach(obj => $(`#${obj.id}`).val(obj.val));
}

// Apply the selected filters to the DOM
let filterObjects = () => {
  var color = $('#select-1').val();
  var shape = $('#select-2').val();
  var style = $('#select-3').val();

  $('div.object').each(function() {
    let $el = $(this);
    $el.toggle($el.hasClass(color) && $el.hasClass(shape) && $el.hasClass(style))
  });
}

jQuery($ => {
  retrieveObjectFilterSettings();
  filterObjects();

  $('#selectContainer select').on('change', function() {
    saveObjectFilterSettings();
    filterObjects();
  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
    <option value="allColors">All</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
  <select name="select-2" id="select-2">
    <option value="allShapes">All</option>
    <option value="Square">Square</option>
    <option value="Circle">Circle</option>
  </select>
  <select name="select-3" id="select-3">
    <option value="allStyles" selected>All</option>
    <option value="Solid">Solid</option>
    <option value="Outline">Outline</option>
  </select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
  <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
  <p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
  <p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
  <p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
  <p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
  <p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
  <p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
  <p>This is a blue, circle outline.</p>
</div>

这是jsFiddle 中的一个工作示例 - 我不得不为此使用小提琴，因为 SO sn-ps 是沙盒并且不允许访问 localStorage。