javascript - 刷新 JQuery 后将最后选择的选项保留在选择中

Question

我有一个汽车列表和一个包含汽车品牌和“全部”的选择列表，在选择选项时，我根据汽车品牌过滤汽车。例如，当我选择“梅赛德斯”时，仅显示梅赛德斯的汽车，而我们选择全部，则显示所有汽车。 (一切都很好)。

当我刷新页面时，我希望根据我选择的最后一个选项(刷新之前)过滤列表，而不是再次过滤所有列表。我想知道是否有一种方法可以在客户端执行此操作而不需要服务器端工作。我只需要提一下，我的问题不是关于“onchange”函数，而是关于存储最后选择的选项。

Answer 1

如果您只需要它在页面刷新之间保持不变，而不是在不同的浏览器 session 中保持不变，则使用 sessionStorage api :

// When changing the filter
var filter = 'Mercedes';
sessionStorage.setItem('last-filter', filter);

// When loading the page (document.ready)
var filter = sessionStorage.getItem('last-filter') || 'all';
if (filter !== 'all') {
    changeFilter(filter);  // your function
}

只能直接存储字符串。不存储元素，而是存储其元素 id/类。要存储其他对象，请使用JSON.stringify对数据进行函数将其序列化为字符串。

如果您决定希望过滤器在浏览器崩溃等情况下持续存在，那么可以轻松切换到完全兼容的 localStorage api 。本地存储中的项目没有特定的过期日期，因此如果需要过期，那么您还需要保存过滤器日期以自行检测和删除过时的项目。