本地存儲實現顯示未定義的值

Question

請在下面找到我的代碼片段。基本上，用戶從登錄屏幕輸入用戶名和密碼，當用戶點擊它時，我通過Ajax調用傳遞信息，如果JSON響應包含SUCCESS，如我的支票else if (data_.status == "SUCCESS"){所示，我計劃使用HTML5本地存儲。但是，我得到undefined爲以下控制檯日誌console.log("Value check for DEMO.value:"+demo.value); // I saw undefined here這阻止我前進。我做錯了什麼？我下面this tutorial

$("#submit").click(function (e) { 
    e.preventDefault(); 
    var userNAME = $("#username").val(); 
    var passWord = $("#password").val(); 

    var ajaxRequest = jQuery.ajax({ 
     data: { 
      username: userNAME, 
      password: passWord 
     }, 
     dataType: "json", 
     method: "POST", 
     url: loginUrl 
     }) 
     .done(function (data_, textStatus_, jqXHR_) { 
      if (data_.status != "SUCCESS") { 
      alert(data_.message); 
      return false; 

      } else if (data_.status == "SUCCESS") { 
      var testedValue = $("#userName").html(userNAME); 
      var demoValue = $("#userName").val(); 
      console.log("Value check for userNAME:" + userNAME); 

      // Local Storage Stuff Begins 
      // Grab the username 
      var demo = document.querySelector('#userName'); 
      console.log("Value check for demo:" + demo); // I can see the username here 

      // localStorage feature detect 
      function supportsLocalStorage() { 
       return typeof (Storage) !== 'undefined'; 
      } 

      if (!supportsLocalStorage()) { 
       // Change the value to inform the user of no support 
       demo.value = 'No HTML5 localStorage support, soz.'; 
      } else { 
       console.log("Inside Else Statement; This means the browser has HTML5 localstorage support!"); // I can see this message 
       console.log("Value check for DEMO.value:" + demo.value); // I saw undefined here 

       // Try this 
       try { 
       // Set the interval and autosave every second 
       setInterval(function() { 
        localStorage.setItem('autosave', demo.value); 
       }, 1000); 
       } catch (e) { 
       // If any errors, catch and alert the user 
       if (e == QUOTA_EXCEEDED_ERR) { 
        alert('Quota exceeded!'); 
       } 
       } 

       // If there is data available 
       if (localStorage.getItem('autosave')) { 
       // Retrieve the item 
       demo.value = localStorage.getItem('autosave'); 
       } 
      } // End of Else 
      } 
     } 
     } 
    } 
    } 
} 

添加HTML以供參考：（我跟着this login dialog）不包括

<!-- Login HTML Begins --> 
<div id="wrap"> 
<div id="window" caption="Login"> 
    <div> 
     <table> 
     <tr> 
      <td>Username:</td> 
      <td><input style="width: 150px;" type="text" name="user" id = "username" /></td> 
     </tr> 
     <tr> 
      <td>Password:</td> 
      <td><input style="width: 150px;" type="password" name="password" id = "password" /></td> 
     </tr> 
     <tr> 
      <td colspan="2" align="right" valign="bottom"> 
       <input type="button" id="submit" value="Login" /> 
      </td> 
     </tr> 
     </table> 
    </div> 
</div> 
<!-- </div> --> 
<!-- Login HTML ends --> 

以下HTML belogs到我顯示HTML頁面上的username（全碼的位置）

<li><a title="Logout" onclick="a" href="#"><i class="fa fa-user whiteIcon"></i>&nbsp;&nbsp;<span id="userName">

Answer 1

這是不可能的demo.value被BEF設置礦石您做出CONSOLE.LOG

if (!supportsLocalStorage()) 

    demo.value = 'No HTML5 localStorage support, soz.'; 

它得到的設置如上，如果!supportsLocalStorage()是真實的，但你登錄它的逆情況。將您的console.log進一步向下移動到頁面中，直到您設置完成。

Answer 2

我認爲問題在於你正在使用document.querySelector('#userName')而不是document.querySelector('#username')。

以下示例說明應該如何的樣子，沒有一個Ajax請求：

http://codepen.io/ovitrif/pen/ENdwrj

PS：您對localStorage的作品的邏輯。

另外一個問題，你使用：

var demo = document.querySelector('#username'); 
console.log("Value check for demo:" + demo); 

這意味着你正在嘗試元素本身追加到文本的其餘部分。我想你只想要的價值，所以你的代碼應該是：

console.log("Value check for demo:" + demo.value); 

Answer 3

你必須解決使用一個jQuery Labrary我做了什麼，並很好地工作：

// check if browser support storage 
    if($.storage()) 
    { 
     // Set a session storage 
     $.storage('the_storage', 'the_value'); 

     // Get session storage 
     $.storage('the_storage'); 

     // delete storage 
     $.storage('the_storage', null); 
    } 
    else 
    { 
     // browser not support, use cookie 
     alert("WARNING!!! Your Browser is old and not have Web Storage support.Perhaps you'll have problems using this site."); 
    } 

但我有這個函數中的cookie和如果本地存儲您的瀏覽器不支持，automaticaly功能開始使用cookie，你沒有問題。

下面是完整的代碼功能：GitHub

隨意使用它。