如何让jQuery选择器筛选系统在用户返回页面时保留并生效最后一次筛选偏好？

Hey there! I totally get what you're dealing with—when users navigate back from the detail page, the dropdown selections stay set, but the filter doesn't kick in automatically. Let's fix this by combining browser localStorage for persisting state and triggering the filter logic as soon as the page loads.

Step-by-Step Solution #

Let's break this down into simple, actionable changes:

1. Wrap filter logic in a reusable function: Avoid repeating code and make it easy to run the filter whenever we need it.
2. Save filter state to localStorage: Every time the user changes a dropdown, we'll store their selections in the browser so the state persists even when they leave the page.
3. Load saved state & trigger filter on page load: When the filter page loads (including when the user navigates back), we'll pull the saved selections, set the dropdowns, and run the filter right away.

Modified Working Code #

Here's the updated code with all these improvements:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
// Reusable filter function to avoid code duplication
function applyFilters() {
    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() { 
        // Handle "All" options correctly (show items if the filter is set to All)
        var matchesColor = color === 'allColors' || jQuery(this).hasClass(color);
        var matchesShape = shape === 'allShapes' || jQuery(this).hasClass(shape);
        var matchesStyle = style === 'allStyles' || jQuery(this).hasClass(style);
        
        if(matchesColor && matchesShape && matchesStyle) { 
            jQuery(this).show(); 
        } 
    }); 
    
    // Save current filter state to localStorage
    localStorage.setItem('filterState', JSON.stringify({
        color: color,
        shape: shape,
        style: style
    }));
}

jQuery(document).ready(function() {
    // Load saved filter state when the page first loads
    var savedState = localStorage.getItem('filterState');
    if(savedState) {
        var state = JSON.parse(savedState);
        // Set dropdowns to the saved values
        jQuery('#select-1').val(state.color);
        jQuery('#select-2').val(state.shape);
        jQuery('#select-3').val(state.style);
        // Trigger the filter immediately to show the correct results
        applyFilters();
    }

    // Attach filter function to dropdown change events
    jQuery('#selectContainer select').on('change', applyFilters);

    // Your existing button click handler (still works!)
    $('#btnAuckland').click(function(){ 
        $('#select-1').val('Red').trigger('change'); 
    });
});
</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>

Key Changes Explained #

• Reusable applyFilters(): This function does all the heavy lifting of filtering items and saves the current state. We can call it both when dropdowns change and when the page loads.
• localStorage Persistence: We store the filter state as a JSON string (since localStorage only holds text) so we can easily retrieve and restore it later.
• "All" Option Fix: I updated the filter logic to properly handle "All" selections—before, it was relying on the allColors/allShapes classes, but this makes the logic more explicit and robust.
• Page Load Trigger: When the user navigates back, the document.ready code grabs the saved state, sets the dropdowns, and runs the filter instantly, so users see their filtered results right away.

Note on Your goBack() Method #

Your detail page's goBack() function will work perfectly with this setup. When the filter page reloads (via the back button or history.back()), our code will automatically pick up the saved state and apply the filter—no extra changes needed there.

内容的提问来源于stack exchange，提问作者Murat