刷新JQuery后，将最后一个选定选项保留在select中

Question

我有一个汽车列表和一个选择列表，其中包括汽车品牌和“全部”，当选择一个选项时，我过滤汽车根据他们的品牌。例如，当我选择“奔驰”时，只有梅赛德斯的汽车被展示，而我们选择所有的，所有的汽车都被展示。(一切都很好)。

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

Answer 1

如果只需要在页面刷新(而不是不同的浏览器会话)中持久化，则使用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/class。要存储其他对象，请使用数据上的JSON.stringify函数将其序列化为字符串。

如果您决定希望过滤器在浏览器崩溃的情况下持续存在，那么就很容易切换到完全兼容的localStorage api。本地存储中的项没有特定的过期日期，因此，如果希望过期，则还需要保存筛选日期，以便自己检测和删除过期项。