Пожалуйста, найдите мой фрагмент кода ниже. По сути, пользователь вводит имя пользователя и пароль с экрана входа в систему, и когда пользователь нажимает на него, я передаю информацию через вызов Ajax, и если ответ JSON содержит SUCCESS, как показано в моей проверке else if (data_.status == "SUCCESS"){, я Я планирую использовать HTML5 локальное хранилище. Но я получаю undefined для следующего журнала консоли console.log("Value check for DEMO.value:"+demo.value); // I saw undefined here, который мешает мне двигаться вперед. Я что-то не так делаю? Я слежу за этим учебником

$("#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 для справки: (я следовал этому диалоговому окну входа в систему)

<!-- 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 принадлежит к тому месту, где я отображаю username на странице HTML (полный код не включен)

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

-1
John 13 Дек 2016 в 23:07

3 ответа

Лучший ответ

Невозможно установить demo.value до того, как вы создадите файл console.log.

if (!supportsLocalStorage())

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

Он устанавливается, как указано выше, если !supportsLocalStorage() имеет значение true, но вы выходите из него в обратном случае. Переместите console.log дальше вниз по странице, чтобы после того, как вы его настроили.

1
Baconbeastnz 13 Дек 2016 в 20:13

У вас есть решение использовать один 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 в эту функцию, и если локальное хранилище не поддерживается вашим браузером, функция автоматически запускает cookie, и у вас нет проблем.

Вот функция полного кода: GitHub

Не стесняйтесь использовать его.

0
Ivijan Stefan Stipić 13 Дек 2016 в 21:50

Я думаю, что проблема заключается в том, что вы используете 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);
0
Ovi Trif 13 Дек 2016 в 21:41