Safari后页(后退按钮)问题

时间:2016-03-17 12:16:39

标签: javascript jquery

我在下拉菜单中使用以下功能:

  • 下拉菜单会更改已使用的货币,因此会更改a 物品的价格为该货币。
  • 使用下拉列表时,下面的代码也会添加来自“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>

0 个答案:

没有答案