会话存储未保存或未加载

sessionStorage not saving or not loading

本文关键字：加载 保存 会话 存储      更新时间：2023-09-26

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

我有一个下拉菜单，当使用它时，还可以将"title"标签中的内容填充到文本区域中。下拉列表强制页面重新加载，从而再次清空文本区域。为此，我正在尝试使用会话存储再次重新填充文本区域。但是出了点问题。

当我使用下拉菜单并在浏览器中返回一页时，我看到文本区域已填充。但是，如果我随后刷新该页面，则文本区域再次为空。因此，这导致我认为会话存储未保存或加载文本区域。

请看这里并使用名为"测试"的下拉菜单。文本区域就在它旁边。

请问谁能帮忙？

我的代码：

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

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

还要尝试添加这个，以检查浏览器是否允许本地存储：

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

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

<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>
相关文章：