Держите подразделение активным после отправки формы с помощью localStorage

У меня возникла проблема с сохранением активности подразделения после отправки формы с помощью AJAX. Мой сценарий заключается в том, что у меня есть панель поиска, которая может принимать несколько типов ввода (имя, идентификатор, категория и т. д.). Затем у меня есть панель фильтров, которая в основном представляет собой расширенный поиск, она практически делает то же самое, но имеет больше параметров, таких как отдельные поля для имени, идентификатора, категории, ценового диапазона и т. д. это некоторые важные термины,

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 такие же, как у Fiddle.

Редактировать 1: попробовал локальное хранилище

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

Проблема: раскрывающийся список отображается и при первой перезагрузке, этого следует избегать.