Question 275088 in Html Question posted in
Some basic documentation can be found here.

HTML DOM – localStorage

I was trying to make a basic sign-up/login thingy using localStorage in JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>login</h1>
    <h2>username</h2>
    <input id = "userSave">
    <h2>password</h2>
    <input id = "passSave">
    <button onclick = "saved()">save</button>
    <h2 id = "textSave"></h2>

    <h1>sign up</h1>
    <h2>username</h2>
    <input id = "userLoad">
    <h2>password</h2>
    <input id = "passLoad">
    <button onclick = "loaded()">load</button>
    <h2 id = "textLoad"></h2>

    <script>
        function saved() {
            let text = document.getElementById("textSave").innerHTML;
            let username = document.getElementById("userSave").value;
            let password = document.getElementById("passSave").value;

            localStorage.setItem(username, password);
            text = "saved";
        }

        function loaded() {
            let text = document.getElementById("textLoad").innerHTML;
            let username = document.getElementById("userLoad").value;
            let password = document.getElementById("passLoad").value;

            if (localStorage.getItem(username) == password) {
                text = "welcome";
            }
            else {
                text = "login failed";
            }
        }
    </script>
</body>
</html>

I have checked everything. Spelling, onclicks, function names, and most of the stuff is fine, but it won’t work properly

Tags:

2

Answers


  1. 0

    I assume what you mean with "it doesn’t work", is that you don’t see any DOM changes. Strings are immutable so it counts as a "pass by value".

    If you want to make DOM changes, then instead set your text reference to the element:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>login</h1>
    <h2>username</h2>
    <input id = "userSave">
    <h2>password</h2>
    <input id = "passSave">
    <button onclick = "saved()">save</button>
    <h2 id = "textSave"></h2>

    <h1>sign up</h1>
    <h2>username</h2>
    <input id = "userLoad">
    <h2>password</h2>
    <input id = "passLoad">
    <button onclick = "loaded()">load</button>
    <h2 id = "textLoad"></h2>

    <script>
        function saved() {
            let text = document.getElementById("textSave");
            let username = document.getElementById("userSave").value;
            let password = document.getElementById("passSave").value;

            localStorage.setItem(username, password);
            text.innerHTML = "saved";
        }

        function loaded() {
            let text = document.getElementById("textLoad");
            let username = document.getElementById("userLoad").value;
            let password = document.getElementById("passLoad").value;

            if (localStorage.getItem(username) == password) {
                text.innerHTML = "welcome";
            }
            else {
                text.innerHTML = "login failed";
            }
        }
    </script>
</body>
</html>

    Side note: I realize this is for practise, so I won’t dig to deep into it – but storing passwords as plaintext, and on the client (and doing client validation for passwords) is never a good idea for any real projects

    Login or Signup to reply.
  2. 0

    first thing do you need is fix your logic for login and sign up flow. You can separated this with 2 different page. usually, we can login if we have an account (Username or Password) and sign up if we haven’t username and password.

    You can see bellow logic for login like

    var usernameKey = "admin"
var passKey = "admin"
function saved(){
        let username = document.getElementById("userSave").value;
    let password = document.getElementById("passSave").value;
    if((username == usernameKey) && (password == passKey)){
         console.log("condition when Username & Password True")
    }else{
             console.log("Username Or Password False")
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="signIn">
    <h1>login</h1>
    <h2>username</h2>
    <input id="userSave">
    <h2>password</h2>
    <input id="passSave" type="password">
    <button onclick="saved()">save</button>
    <h2 id="textSave"></h2>
</div>
</body>
</html>

    And A Sign Up Like:

    function loaded(){
        let username = document.getElementById("userLoad").value;
    let password = document.getElementById("passLoad").value;
    
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="signUp">
    <h1>sign up</h1>
    <h2>username</h2>
    <input id="userLoad">
    <h2>password</h2>
    <input  id="passLoad">
    <button onclick="loaded()">load</button>
    <h2 id="textLoad"></h2>
</div>
</body>
</html>

    I hope this help you to find solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search