Передавать переменную JS с одной страницы на другую

Я создал автозаполнение AJAX из файла JSON

function run() {
    field.show();
    field.html('');
    let val = search.val();
    let input = new RegExp(val, "gi");

    $.get("js/pk.json").then(function(city) {
        if (val.trim().length === 0) {
            field.empty();
            field.hide();
        }
        $.each(city, function(key, value) {
            let n = new RegExp(val, 'gi');
            let name = value.city.replace(n, `<span class = "me">${val}</span>`);
            if (value.city.search(input) != -1) {
                field.append(`<li class = "list-search" data-name='${value.city}'><a href = "pages/check.html" class = "waves-effect">${name}  ${value.country}<br><br></a></li>`);
            }
        })
    })
});

и я хочу передать значение тега li, щелкнувшее по атрибуту "data-name", в div на другой странице.

Это :

$("#field").on("click", "li", function(e) {
    finalName=$(this).attr('data-name');
});

а div - <div class = "Fname"></div>.

Переменная finalName является глобальной, но вне этого события щелчка она показывает undefined.

Я не эксперт, но думаю, что это связано с асинхронным запросом AJAX, который загружает переменную до того, как ей будет присвоено значение. Кто-нибудь может объяснить мне, как это будет работать? Я нашел другие ответы, связанные с этим, но не смог их понять. заранее спасибо