Como manter selecionado os resultados do meu select após reload de página com jQuery/JavaScript | jQuery

Sou novo em programação e estou com a seguinte situação. Tenho um select2, com algumas cidades selecionadas. Como posso fazer para que quando eu clicar na minha URL e apertar o enter, ele não limpe essas cidades selecionadas?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Segue meu código abaixo. Essa funcionalidade está em branco no meu código, pois não tenho a menor ideia de como fazer. Não quero fazer isso clicando em um botão, pois já sei fazer. O que eu preciso é que ele não limpe as minhas cidades selecionadas quando eu seleciono a URL e aperto enter. Isso é possível de se fazer? Pq quero limitar essa consulta em 5 cidades, caso ultrapasse, ele me retornará uma msg de erro e as cidades permanecerão selecionadas. Isso me facilitaria em não ter que selecionar novamente as cidades.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cidades</title>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.css" integrity="sha512-Ty5JVU2Gi9x9IdqyHN0ykhPakXQuXgGY5ZzmhgZJapf3CpmQgbuhGxmI4tsc8YaXM+kibfrZ+CNX4fur14XNRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

    <div class="card card_primary">
        <div class="card-body">
        <select class="js-example-basic-multiple form-control" id="cboCidades" multiple="multiple" style="width: 100%;">
         </select>
        </div>
    </div> 

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({
            language: "pt-BR",
        });
    });

    const allCidades = [];
     $( function() {
     $.ajax({ 
      type: 'GET', 
      url: 'localhost:5000/cidades',
      success: function (data) { 
                $.each(data, function(index, element) {
                    $('#cboCidades').append('<option value="'+element.cidade+'">'+element.cidade+'</option>')
                    allCidades.push({'cidade':element.cidade});
                });
        }
    }); 
 });
    </script>
</body>
</html>

Grato quem puder me ajudar.

OBS: Não uso PHP.