我有一个包含汽车列表的页面,每个汽车都有不同的属性(品牌,型号,颜色,原产国等),存储为HTML类值,例如:
<li class="car honda civic blue japan">Honda Civic</li>
。
我创建了一些javascript过滤器,使用这些类来缩小列表范围(即只显示<li>
或blue
作为类的japan
,但是当用户导航到另一个页面并点击&#34; Back&#34;按钮在浏览器中,重置过滤器。
我不清楚如何告诉History.js存储已应用的过滤器(在本例中为blue
和japan
)并在用户点击浏览器时重新应用它们#39; s后退按钮。
<script>
(function(window,undefined){
// Establish Variables
var State = History.getState();
// Bind to State Change
History.Adapter.bind(window,'statechange',function() {
var State = History.getState(); // Note: We are using History.getState() instead of event.state
});
// I want to save the state of the filters every time a new one is clicked
$(".filter a").click(function() {
var myState += $(this).class() + " "; // This will just be a string of all the applied filters
history.pushState(myState, viewModel.title, viewModel.url);
});
})(window);
</script>