缓存 List.js 结果 - 在浏览器后退按钮上重新加载过滤结果

Question

我有一个网站，我使用 List.js 在 For Sale 和 To Let 属性之间进行过滤。

这个的JS是这样的：

var options = {
    valueNames: [ 'status' ],
};

var hackerList = new List('property-list', options);

我正在使用一个选择框来填充隐藏的输入，以过滤列表：

<script type="text/javascript">
    function changeValue() {
        var option = document.getElementById('filter').value;

        if (option == "Sale") {
            document.getElementById('field').value = "Sale";
            document.getElementById("field").focus();
        } else if (option == "Letting") {
            document.getElementById('field').value = "Letting";
            document.getElementById("field").focus();
        } else if (option == "") {
            document.getElementById('field').value = "";
            document.getElementById("field").focus();
        }
    }
</script>

我需要一些如何使用WebStorage 或Cookies 存储此结果的方法，但无论我尝试什么，我都会添加更多代码，过滤器会停止一起工作。

当用户从属性列表按下返回按钮到列表页面时，它需要显示他们已经过滤的结果。

有什么想法吗？

---

每个结果都列在一个 li 中。我正在使用 Wordpress 和 ACF Pro 来执行此操作：

        <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    <li class="col-md-4 <?php if( has_term( 'For Sale', 'propertycategories' ) ) {?>sale <?php } ?><?php if( has_term( 'To Let', 'propertycategories' ) ) {?>let<?php } ?>">
        <p class="status hidden"><?php if( has_term( 'For Sale', 'propertycategories' ) ) {?>Sale<?php } ?><?php if( has_term( 'To Let', 'propertycategories' ) ) {?>Letting<?php } ?></p>

        <a href="<?php the_permalink(); ?>" class="property wow fadeIn">
            <div class="property-image-container <?php the_field('offer_status2'); ?>">
                <span class="badge"><?php the_field('offer_status2'); ?> </span>
                <img class="property-image" src="<?php the_field('property_image_1'); ?>" alt=" "/>
            </div>
            <div class="property-details-container">
                <span class="float-left"><?php the_title(); ?></span>
                <span class="float-right">£<?php echo number_format( get_field('price') ); ?>             <?php if( has_term( 'To Let', 'propertycategories' ) ) {?>PCM <?php } ?></span>
                <div class="clearfix"></div>
            </div>
        </a>
    </li>
<?php endwhile; endif; ?>

我希望这会有所帮助。再次感谢您的帮助！

Answer 1

您可以使用window.history.pushState“存储”有关在 url 中应用的过滤器的信息。例如：

var option = document.getElementById('filter').value;
var url = `${window.location.href}?filter=${option}`;
window.history.pushState({}, '', url);

该 url 将被添加到用户历史记录中，因此当他从属性列表中单击返回按钮时，该 URL 将包含先前“存储”的参数。

所以在这种情况下，参数将类似于：http://example.com/?filter=Sale

现在您可以使用 PHP/JS 来应用过滤器。