sessionStorage 不保存或不加载答案

【问题标题】：sessionStorage not saving or not loadingsessionStorage 不保存或不加载
【发布时间】：2016-03-17 09:35:41
【问题描述】：

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

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

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

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

【问题讨论】：

该页面出现错误，您在此处缺少)....

标签： javascript jquery html

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

【讨论】：

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

【讨论】：