<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <title>Home</title>
</head>

<body>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item mx-1">
                          <a id="userlink" class="nav-link" href="">Username</a>
                        </li>
                            
                        <li class="nav-item mx-1">
                            <a id="signoutlink" class="nav-link" href="">Sign Out</a>
                          </li>
                      </ul>

            </form>
          </div>
        </nav>

        <h3 id="hh"></h3>

        <script>

//------------------------------REFRENCES--------------------------------------------------------------------------// 

        let userlink = document.getElementById('userlink'); 
        let signoutlink = document.getElementById('signoutlink');
        let header = document.getElementById('hh');
        var currentUser = null;

//------------------------------Functions--------------------------------------------------------------------------// 

        function getUsername(){
            let keepLoggedIn = localStorage.getItem("keepLoggedIn");
 
            if(keepLoggedIn == "yes"){
                currentUser = JSON.parse(localStorage.getItem('user'));
            }

            else{
                currentUser = JSON.parse(sessionStorage.getItem('user'));

            }

        }

        function Signout(){
            sessionStorage.removeItem('user');
            localStorage.removeItem('user');
            localStorage.removeItem('keepLoggedIn');
            window.location = "home.html";
        }

//------------------------------WINDOWS LOADS----------------------------------------------------------------------// 

        window.onload = function(){
            getUsername();
            if(currentUser == null){
                userlink.innerText="Create New Account";
                userlink.classList.replace("nav-link","btn");
                userlink.classList.add("btn-primary");
                userlink.href = "register.html";

                signoutlink.innerText = "Login";
                signoutlink.classList.replace("nav-link","btn");
                signoutlink.classList.add("btn-success");
                signoutlink.href = "login.html";

            }

            else{
                userlink.innerText= currentUser.username;
                header.innerText = "welcome "+ currentUser.fullname;
                userlink.classList.replace("btn", "nav-link");
                userlink.classList.remove("btn-primary");
                userlink.href = "#";

                signoutlink.innerText= "Sign Out";
                signoutlink.classList.replace("btn", "nav-link");
                signoutlink.classList.remove("btn-success");
                signoutlink.href = "javascript:Signout()";
            }
        }

      </script>

<body>

<html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.