刷新页面的LocalStorage值问题答案

【问题标题】：LocalStorage value problem at refresh page刷新页面的LocalStorage值问题
【发布时间】：2019-11-12 19:17:55
【问题描述】：

我对 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>

【问题讨论】：

提示：当您的页面刷新完成时，将调用$(document).ready(() => {....})。您可以从那里调用 localStorage.getItem("respuesta") 并将生成的字符串解析为您的 DOM 元素
刷新后究竟能看到什么？
@CharlieH 该页面在选择和跨度中显示美元。例如，如果我将选择更改为 MXN，则选择和跨度更改为 MXN，但是当我再次刷新所有更改为 USD 时。
您必须从 localStorage 中加载选定的值，并在页面加载时将其设置在组合框中
@CharlieH 谢谢！如何重写我的代码以使其正常工作？

标签： javascript jquery html ajax local-storage

【解决方案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);

})

【讨论】：