我在下拉菜单中使用以下功能:
使用下拉列表时,下面的代码也会添加来自“title”标签的内容 选择货币到文本区域(id =“showTitle”)。
SessionStorage,因为下拉列表会刷新 新货币的页面,没有sessionStorage文本区域 新页面将为空。
SessionStorage将完全相同的内容重新加载回文本区域
每次页面刷新。改变内容的唯一方法
是通过使用下拉列表。
到目前为止一切顺利。 但现在出现问题。
使用Safari(mac)作为浏览器: 如果用户更改货币(假设从欧元到美元)然后使用浏览器的页面返回功能,价格将更改回欧元的先前价格,但文本区域仍显示“美元”,因为它由sessionStorage加载。这似乎只发生在Safari。有没有人有办法解决这个问题?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="currency select" title="Currency Selector">
<select name="currency" id="currencyList" value="GO">
<option value="" disabled="disabled" selected="selected" none="">$ € £</option>
<option value="/session/currency/usd/" title="US Dollar">USD</option>
<option value="/session/currency/eur/" title="EURO">EUR</option>
</select>
<textarea id="showTitle"></textarea>
</form>
<script>
$(document).ready(function(){
var field = document.getElementById("showTitle");
var savedValue = sessionStorage.getItem("autosave");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (savedValue) {
// Restore the contents of the text field
field.value = savedValue;
//set dropdown to session value
$('#currencyList option[title="'+ savedValue + '"]').prop('selected', true);
}
// Listen for changes in the text field
field.addEventListener("input", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", this.value);
});
$(document).on('change','#currencyList',function(){
//get text
var result = $("option:selected",this).attr('title');
//set field
$(field).val(result);
//set session storage item
sessionStorage.setItem("autosave", result);
//redirect
window.document.location.href=this.options[this.selectedIndex].value;
});
});
</script>
</body>
</html>