Question

我正在尝试（重新）使用sessionStorage填充文本区域，但这似乎无法正常工作。

我有一个下拉列表，使用时也会将“title”标签中的内容填充到文本区域。下拉强制页面重新加载，因此将再次清空文本区域。为此，我尝试使用sessionStorage再次重新填充文本区域。但是出了点问题。

当我使用下拉菜单然后在浏览器中返回一页后，我看到文本区域已填满。但是，如果我然后刷新该页面，则文本区域再次为空。因此，这使我认为textStorage没有保存或加载文本区域。

请look here并使用名为“test”的下拉列表。文本区域就在它旁边。

有人可以帮忙吗？

我的代码：

<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" onchange="window.document.location.href=this.options[this.selectedIndex].value;"  value="GO">
        <option value="" disabled="disabled" selected="selected" none="">TEST</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>
</body>
<script>
$(document).ready(function()
{
    $(document).on('change','#currencyList',function()
    {
       var result = $("option:selected",this).attr('title');
       $("#showTitle").text(result);
    }

  // Get the text field that we're going to track
var field = document.getElementById("showTitle");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

  // Listen for changes in the text field
field.addEventListener("change", function() {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);

});
});
</script>

Answer 1

您应该使用$(document).on('change'..){关闭});。

还尝试添加此项，以检查浏览器是否允许localStorage：

//At the beggining
if(!supportsHTML5Storage()) { return false; //or alert() }


/**
 * function that checks if the browser supports HTML5
 * local storage
 *
 * @returns {boolean}
 */
function supportsHTML5Storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Answer 2

我收到了答复，这是工作代码：

<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" onchange="window.document.location.href=this.options[this.selectedIndex].value;"  value="GO">
        <option value="" disabled="disabled" selected="selected" none="">TEST</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");


    // See if we have an autosave value
    // (this will only happen if the page is accidentally refreshed)
    if (sessionStorage.getItem("autosave")) {
    // Restore the contents of the text field
        field.value = sessionStorage.getItem("autosave");
    }

    // 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>

sessionStorage未保存或未加载

2 个答案: