DEVHIDE
Login Or Sign up

HTML DOM - localStorage

62 Views Asked by At

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

javascript html simple-html-dom
Original Q&A
3

There are 3 best solutions below

0
Rasmus Søborg On

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

0
Andri Nugroho On

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.

0
CodexABQ On

The issue might be coming from your saved function, you are trying to set the text variable to "saved", but you're not updating the HTML element with this value. You should use document.getElementById("textSave").innerHTML = "saved"; to update the text:

<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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SIMPLE-HTML-DOM

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.