2016-03-17 22 views
0

我想(使用)sessionStorage填充文本區域,但這似乎不起作用。sessionStorage不保存或不加載

我有一個下拉菜單,當使用時還會將「標題」標籤中的內容填充到文本區域中。下拉菜單強制頁面重新加載,因此會再次清空文本區域。爲此,我嘗試使用sessionStorage重新填充文本區域。但有些事情出錯了。

當我使用下拉菜單,然後在瀏覽器中返回一個頁面時,我看到文本區域被填充。但是,如果我然後刷新該頁面的文本區域是空的。所以這導致我認爲文本區域沒有被sessionStorage保存或加載。

look here並使用名爲「測試」的下拉列表。文本區域就在它旁邊。

任何人都可以幫忙嗎?

我的代碼:

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

有該網頁上的錯誤,並且你在這裏錯過了')'.... – dandavis

回答

0

你應該});關閉$(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; 
    } 
} 
0

我收到的答案,這是工作代碼:

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