在使用localStorage提交表单后保持分区活动

Question

我有一个使用AJAX提交表单后保持部门活动的问题。我的场景是，我有一个搜索栏，它可以接受多种类型的输入(名称、ID、类别等)。然后是过滤栏它基本上是高级搜索，功能相同但有更多选项比如单独的字段名称，ID，类别，价格范围等等这些是一些重要的术语

1. ID:产品ID
2. 名称:产品名称
3. SPL_CD:为每个产品分配的特殊代码
4. ALT_NM2:备用名称/描述
5. costStart/costEnd:查找成本价格在
范围内的所有产品
6. sellStart/sellEnd:范围搜索销售价格在
范围内的所有产品
7. cname:产品类别
8. gname: group产品归类在
类目下

我不太关心CSS，但关键是，任何在客户端使用此页面的人都需要看到在过滤器下拉列表中插入的值，即保持过滤器下拉列表即使在页面重新加载时也可见。提交表单后，我的整个页面重新加载。这使得下拉菜单再次隐藏。我在AJAX不好，所以我不知道如何做到这一点，任何帮助将不胜感激。

这是工作小提琴(忽略CSS的缺乏，因为它主要是在基于MVC方法的不同文件下定义的)-小提琴这个fiddle也不支持在提交表单后保持除法活动，所以我尝试切换到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 the Local Storage

$("#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");
}
});

问题:第一次重新加载时下拉菜单也显示，需要避免。

Answer 1

您可以使用localstoragesetItem和getItem保存ajax最后的响应。

window.localStorage.setItem("variable", variable);
var getItem = window.localStorage.getItem("variable");

also当你想删除setItem也可以删除

window.localStorage.removeItem('variable');

Answer 2

正如@bhavik所提到的，我已经尝试了使用localStorage的方法，并且它工作了，为了避免在页面重新加载时打开分割，我只是改变了表单提交的方式。而不是if语句，我只是说，

$(document).on("click", "#report tr", function(){
parent.onSearched($("#report").getRowData($(this).attr("value")));
});