本地存储实现显示未定义的值

-1

请在下面找到我的代码片段。基本上，用户从登录屏幕输入用户名和密码，当用户点击它时，我通过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>  <span id="userName">

来源

2016-12-13 John

尝试使用demo.text（） – CognitiveDesire

为什么不使用变量'demoValue'而不是'demo.value'？ – vbguyny

@vbguyny我遵循教程中提到的相同模式。 – John

这是不可能的demo.value被BEF设置矿石您做出CONSOLE.LOG

if (!supportsLocalStorage()) 

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

它得到的设置如上，如果!supportsLocalStorage()是真实的，但你登录它的逆情况。将您的console.log进一步向下移动到页面中，直到您设置完成。

来源

2016-12-13 20:13:13 Baconbeastnz

谢谢。我试着把控制台console.log（“demo.value的测试值在这里：”+ demo.value）;'在这行下面''localStorage.setItem（'autosave'，demo.value）;' ，我看到遵循'测试演示的价值。值：[object HTMLSpanElement]' 同样，我放置了另一个控制台日志'console.log（“Value RETRIEVE Test：”+ demo.value）;'下面的行'demo.value = localStorage.getItem（'autosave'） ;' 我注意到以下内容：'Value RETRIEVE Test：[object HTMLSpanElement]' 是否有一个原因，它没有显示实际值？范围相关的问题可能是？ – John

@John请看我的答案。你会明白为什么你得到'[object HTMLSpanElement]'。 –

我认为问题在于你正在使用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);

来源

2016-12-13 21:41:01

1）将'console.log（“Value check for demo：”+ demo）;'to'console.log（“Value check for demo：”+ demo.value）;' 仍显示我的用户名2），放置'console.log（“demo.value的测试值在这里：”+ demo.value）;'在行的下方'localStorage.setItem（'autosave'，demo.value）;'shows'[object HTMLSpanElement ]'这很奇怪。 – John

好吧，你只显示部分代码。看着这个部分，你的实现看起来是错误的。 –

那么，那里有什么问题？ – John

你必须解决使用一个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

随意使用它。

来源

2016-12-13 21:50:22

本地存储实现显示未定义的值

回答

相关问题