时间戳

首页 > 解决方案 > localstorage only showing the last prompt input

javascript - localstorage only showing the last prompt input

问题描述

Hi I am storing the input from user in localstorage using the alertify prompt in javascript but when trying to display the localstorage variable using innerhtml it is only showing the last prompt which a user is adding. adding the code and demo to explain my problem. I think the localstorage is working fine and it has something to do with the loop and the innerhtml not working outside the if condition maybe?

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>

标签： javascripthtmllocal-storagealertify

解决方案

推荐阅读