Javascript 使用 localStorage 提交表单后保持部门活动

在使用AJAX提交表单后，我对保持分区处于活动状态有问题.我的场景是我有一个搜索栏，它可以接受多种类型的输入(名称、ID、类别等).然后，我有一个过滤器栏，这基本上是一个高级搜索，它实际上做同样的事情，但有更多的选项，如名称，ID，类别，价格范围等单独的字段，这些是一些重要的术语，

1. ID:产品ID
2. 名称:产品名称
3. SPL_CD:分配给每个产品的特殊代码
4. Alt_NM2:备用名称/描述
5. 成本开始/成本结束:范围搜索成本价在该范围内的所有产品
6. SellStart/sellEnd:范围搜索售价在范围内的所有产品
7. Cname:产品类别
8. GNAME:组产品被归入类别

我不太关心css，but the point is that, anyone using this page at client end needs to see the values inserted in the filter dropdown i.e. keeping the filter drop down visible even on page reload.提交表单后，我的整个页面都会重新加载.这会使下拉菜单再次隐藏.我不擅长阿贾克斯，所以我不知道怎么做，任何帮助都将不胜感激.

这是有用的工具(忽略缺少css，因为它主要是在基于MVC方法的不同文件下定义的)-Fiddle 这种操作也不支持在表单提交后保持分区活动，所以我try 切换到AJAX.

这就是我的AJAX方法，但它一直显示空白，而不是显示表及其数据.

$("#searchButton").click(function() {
        var params = {
            searchKeyword: $("#searchKeyword").val()
        };
        var form = $("#searchArea");
        var url = form.attr("action")+"?"+$.param(params);
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            colModel:[
                {label:'ProductID', name:'ITM_CD',classes:'ITM_CD', width:40, align:"center", sorttype:"int"},
                {label:'Name', name:'ITM_NM',classes:'ITM_NM',width:100, align:"center", sorttype:"int"},
                {label:'Alt.name', name:'ITM_ALT_NM2',classes:'ITM_ALT_NM2', width:100, align:"center", sorttype:"string"},
                {label:'Special code', name:'SPL_CD',classes:'SPL_CD', width:50, align:"center", sorttype:"int"},
                {label:'Sort Order', name:'SORDER',classes:'SORDER', width:40, align:"center", sorttype:"int"},
                {label:'Talent Points', name:'TPOINTS',classes:'TPOINTS', width:40, align:"center", sorttype:"int"},
                {label:'Selling price', name:'SPRICE',classes:'SPRICE', width:30, align:"right", sorttype:"string"},
                {label:'Cost price', name:'CPRICE',classes:'CPRICE', width:30, align:"right", sorttype:"string"},
                {label: 'Category Name', name:'CNAME', classes: 'CNAME', width: 30, align: "right", sorttype:"string"},
                {label: 'Group name', name:'GNAME', classes: 'GNAME', width: 30, align: "right", sorttype:"string"}
        ],
        });
    });
    $("#searchButton").click(function() {
        var params = {
          searchKeyword: $("#searchKeyword").val(),
            IDKeyword: $("#IDKeyword").val(),
            NMKeyword: $("#NMKeyword").val(),
            NM2Keyword: $("#NM2Keyword").val(),
            SCKeyword: $("#SCKeyword").val(),
            costStartKeyword: $("#costStartKeyword").val(),
            costEndKeyword: $("#costEndKeyword").val(),
            sellStartKeyword: $("#sellStartKeyword").val(),
            sellEndKeyword: $("#sellEndKeyword").val(),
            cnameKeyword: $("#cnameKeyword").val(),
            gnameKeyword: $("#gnameKeyword").val()
        };
        var form = $("#dropDownFilter");
        var url = form.attr("action")+"?"+$.param(params);
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            colModel:[
                {label:'ProductID', name:'ITM_CD',classes:'ITM_CD', width:40, align:"center", sorttype:"int"},
                {label:'Name', name:'ITM_NM',classes:'ITM_NM',width:100, align:"center", sorttype:"int"},
                {label:'Alt.name', name:'ITM_ALT_NM2',classes:'ITM_ALT_NM2', width:100, align:"center", sorttype:"string"},
                {label:'Special code', name:'SPL_CD',classes:'SPL_CD', width:50, align:"center", sorttype:"int"},
                {label:'Sort Order', name:'SORDER',classes:'SORDER', width:40, align:"center", sorttype:"int"},
                {label:'Talent Points', name:'TPOINTS',classes:'TPOINTS', width:40, align:"center", sorttype:"int"},
                {label:'Selling price', name:'SPRICE',classes:'SPRICE', width:30, align:"right", sorttype:"string"},
                {label:'Cost price', name:'CPRICE',classes:'CPRICE', width:30, align:"right", sorttype:"string"},
                {label: 'Category Name', name:'CNAME', classes: 'CNAME', width: 30, align: "right", sorttype:"string"},
                {label: 'Group name', name:'GNAME', classes: 'GNAME', width: 30, align: "right", sorttype:"string"}
        ],
        });
    });
});

Html和css与提琴是一样的.

编辑1:try 了本地存储

$("#filterSearchButton").on("click", function(){
        localStorage.setItem("style", $("#dropDownFilter").css("display", "none"));
    });
    if (localStorage.getItem("style") === null) {
        localStorage.setItem("style", $("#dropDownFilter").css("display", "flex"));
    } else {
        $("#dropDownFilter").css("display", "flex");
    }
});

Problem: The dropdown displays on first reload too, need to avoid that.个