Как кэшировать JSON-ответ в сеансе браузера, чтобы при фильтрации или перезагрузке страница не занимала много времени

Question

    $("#generateTable").click(function () {
        $.ajax({
            url: "Some JSON web Service URL",
            type: "get",
            cache: true,
            headers: { 'Content-Type': 'application/json' },
            success: function (data) {
                //drawTable(data);
                console.log(data);
                var count = Object.keys(data).length;
                console.log(count);
            }
        });
    });

Это где я запутался.Я делаю запрос на URL, который содержит огромный набор данных с около 40000 строк материала.Как я могу кешировать это так, чтобы при выполнении фильтра или перезагрузки пользователю не приходилось долго ждать (в настоящее время требуется 25 секунд, что, безусловно, является плохим UI / UX).Я пробовал LocalStorage, sessionStorage и т. Д., Но ни один из них, кажется, не работает.Более того, я попытался снова кэшировать ответ в объект и попытался обратиться, но, похоже, он тоже не работает.Также AJAX-запрос запускается, когда пользователь нажимает кнопку «Создать таблицу» с идентификатором «#generateTable».

Вот функция хранения сеанса.

    async function cachedata() {
        var url = "Some JSON web service URL";
        var key = "Repos";
        let cachedData = sessionStorage.getItem(key);
        if (cachedData) {
            console.log(cachedData);
        }
         cachedData = await fetch(url).then(r => r.json())
        sessionStorage.setItem(key,JSON.stringify(cachedData))
        console.log(cachedData);
    }