Проблема значения LocalStorage на странице обновления

Question

У меня проблема с некоторыми валютами в JavaScript, AJAX.Все работает отлично, пока страница не обновляется.Мне нужно, чтобы html (select, span) был синхронизирован с локальным хранилищем.

Поэтому во время обновления страницы все данные остаются в локальном хранилище, а не в элементе dom.

Вот код

/*========= CAMBIO DE DIVISA ==========*/

divisas();

function divisas() {
  $("#cambiarDivisa").append('<option value="USD">$ USD</option>'+'<option value="MXN">$ MXN</option>'+'<option value="EUR">€ EUR</option>')
}

/*========= CAMBIO DE DIVISA ==========*/

$("#cambiarDivisa").change(function(){
  var divisaBase = "USD";
  var divisa = $(this).val();
  $.ajax({
	url: "https://free.currconv.com/api/v7/convert?q="+divisaBase+"_"+divisa+"&compact=ultra&apiKey=MYAPIKEY",
	type:"GET",
	cache: true,
	contentType: false,
	processData: false,
	dataType:"jsonp",
	success:function(respuesta){
		var divisaString = JSON.stringify(respuesta);
		var conversion = divisaString.substr(11,6);

		localStorage.setItem("respuesta", JSON.stringify(divisaString));
		var respuestadivisa = JSON.parse(localStorage.getItem("respuesta"));
        var divisavalue = respuestadivisa.substr(6,3);
		console.log("respuesta",divisavalue);
		$(".cambioDivisa").html(divisavalue);
	}
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="cambioDivisa">USD</span>
<div class="divisa">
    <select class="align-self-end" name="divisa" id="cambiarDivisa" 
    </select>
</div>

Answer 1

Вы должны загрузить значения обратно в элемент Options при запуске вашей веб-страницы.Таким образом, вместо того, чтобы помещать загрузку данных в сам обратный вызов ajax, поместите его в $(document).ready.

$(document).ready(function() {

    var respuestadivisa = JSON.parse(localStorage.getItem("respuesta"));
    var divisavalue = respuestadivisa.substr(6,3);

    console.log("respuesta",divisavalue);

    $(".cambioDivisa").html(divisavalue);

})