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

Question

我有一个网站，我使用List.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来存储结果，但是无论我尝试什么，第二次添加更多的代码，过滤器就会停止一起工作。

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

有什么想法吗？

每个结果都在安莉中列出。我使用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应用过滤器。