Блог

Главная - Вопросы по программированию - localstorage показывает только последний ввод запроса

localstorage показывает только последний ввод запроса

#javascript #html #local-storage #alertify

#javascript #HTML #локальное хранилище #оповещение

Вопрос:

Привет, я сохраняю ввод от пользователя в localstorage, используя приглашение alertify в javascript, но при попытке отобразить переменную localstorage с помощью innerhtml отображается только последнее приглашение, которое добавляет пользователь. добавление кода и демонстрации для объяснения моей проблемы. Я думаю, что localstorage работает нормально, и это как-то связано с циклом, и, может быть, innerhtml не работает вне условия if?

 if (localStorage.getItem("username") === null) {
  alertify.prompt( "What is your name?", function (e, str) {
    if (e) {
        var myname = str;
    localStorage.setItem('username', myname);
    document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}

//add the status
if (localStorage.getItem("status") === null) {
  alertify.prompt( "Are you assigned to any role as of now? (FT, PT, NA)", function (e, str3) {
    if (e) {
        var mystatus = str3;
    localStorage.setItem('status', mystatus);
    document.getElementById("registeredstatus").innerHTML = localStorage.getItem("status");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}
//add the email

if (localStorage.getItem("email") === null) {
  alertify.prompt( "What is your email?", function (e, str2) {
    if (e) {
        var myemail = str2;
    localStorage.setItem('email', myemail);
    document.getElementById("registeredemail").innerHTML = localStorage.getItem("email");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}

//add the starting date
if (localStorage.getItem("date") === null) {
  alertify.prompt( "When did you started your bootcamp training? FORMAT: (DD-MM-YEAR)", function (e, str4) {
    if (e) {
        var mydate = str4;
    localStorage.setItem('date', mydate);
    document.getElementById("registereddate").innerHTML = localStorage.getItem("date");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}
//for inside html
document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
document.getElementById("registeredemail").innerHTML = localStorage.getItem("email");
document.getElementById("registeredstatus").innerHTML = localStorage.getItem("status");
document.getElementById("registereddate").innerHTML = localStorage.getItem("date"); 
 <html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.core.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.default.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.min.js"></script>
  <link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
</head>
<body>
<h4>Welcome to your Bootcamp Tracker: <span id="welcometext"></span></h4>
<h4>Your Registered Email with us is : <span id="registeredemail"></span></h4>
<h4>Your Bootcamp Starting Date : <span id="registereddate"></span></h4>
<h4>Your current status for work is : <span id="registeredstatus"></span></h4>
</body>
</html>

Комментарии:

1. «делать с циклом» Какой цикл?

2. Проблема, которую я вижу, заключается в том, что вы обрабатываете что-то асинхронное как синхронное. Код для alertify.prompt запускается и не ждет, пока это будет сделано, чтобы продолжить.

3. извините, я имею в виду условие if. @epascarello

4. Я просто хочу использовать ввод запроса для сохранения в localstorage, а затем использовать его в innerhtml на стороне html страницы.

5. Я понимаю. Я понятия не имею о библиотеке, которую вы используете, поэтому я не могу сказать, что она поддерживает обещания. Ответ зависит от того, что поддерживает эта библиотека.