<!DOCTYPE html>

<html lang= "es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="CVDGP">
    <meta name="description" content="Uso de web Storage en html5 utilizando JS">
    <meta name="keywords" content="localeStorage, sesionStorage, JavaScript, html5">
    <title>Web Storage</title>
    <link rel="shortcut icon" href="">
  </head>
  
  <body>
    <header> 
      <h1>web Storage</h1>
       <svg x="0px" y="0px" width="30px" height="30px"  id="onOff" viewBox="0 0 500 500">

		<path  d="M237.545,255.816c9.899,0,18.468-3.609,25.696-10.848c7.23-7.229,10.854-15.799,10.854-25.694V36.547
			c0-9.9-3.62-18.464-10.854-25.693C256.014,3.617,247.444,0,237.545,0c-9.9,0-18.464,3.621-25.697,10.854
			c-7.233,7.229-10.85,15.797-10.85,25.693v182.728c0,9.895,3.617,18.464,10.85,25.694
			C219.081,252.207,227.648,255.816,237.545,255.816z" />
		<path d="M433.836,157.887c-15.325-30.642-36.878-56.339-64.666-77.084c-7.994-6.09-17.035-8.47-27.123-7.139
			c-10.089,1.333-18.083,6.091-23.983,14.273c-6.091,7.993-8.418,16.986-6.994,26.979c1.423,9.998,6.139,18.037,14.133,24.128
			c18.645,14.084,33.072,31.312,43.25,51.678c10.184,20.364,15.27,42.065,15.27,65.091c0,19.801-3.854,38.688-11.561,56.678
			c-7.706,17.987-18.13,33.544-31.265,46.679c-13.135,13.131-28.688,23.551-46.678,31.261c-17.987,7.71-36.878,11.57-56.673,11.57
			c-19.792,0-38.684-3.86-56.671-11.57c-17.989-7.71-33.547-18.13-46.682-31.261c-13.129-13.135-23.551-28.691-31.261-46.679
			c-7.708-17.99-11.563-36.877-11.563-56.678c0-23.026,5.092-44.724,15.274-65.091c10.183-20.364,24.601-37.591,43.253-51.678
			c7.994-6.095,12.703-14.133,14.133-24.128c1.427-9.989-0.903-18.986-6.995-26.979c-5.901-8.182-13.844-12.941-23.839-14.273
			c-9.994-1.332-19.085,1.049-27.268,7.139c-27.792,20.745-49.344,46.442-64.669,77.084c-15.324,30.646-22.983,63.288-22.983,97.927
			c0,29.697,5.806,58.054,17.415,85.082c11.613,27.028,27.218,50.34,46.826,69.948c19.602,19.603,42.919,35.215,69.949,46.815
			c27.028,11.615,55.388,17.426,85.08,17.426c29.693,0,58.052-5.811,85.081-17.426c27.031-11.604,50.347-27.213,69.952-46.815
			c19.602-19.602,35.207-42.92,46.818-69.948s17.412-55.392,17.412-85.082C456.809,221.174,449.16,188.532,433.836,157.887z"/>

</svg>
      <nav>
        <div id="logo">
        CVDGP
        </div>
      
          <svg height="50px" viewBox="-31 0 511 512" width="50px" id="teleOperador">
            <path d="m270.492188 512v-62h75c24.8125 0 45-20.1875 45-45v-15h60v-30h-60v-30h59.847656l-59.875-138.167969c-1.527344-94.761719-71.605469-175.109375-164.972656-189.53125v-2.300781h-90v9.132812c-64.363282 20.355469-116.6875 75.613282-130.828126 144.972657-13.769531 67.527343 7.070313 134.898437 55.828126 181.613281v176.28125zm90-317v3.109375l44.152343 101.890625h-44.152343v60h-67.5l-58.523438-78.027344c21.859375-16.4375 36.023438-42.582031 36.023438-71.972656 0-33.242188-18.121094-62.335938-45-77.917969v-99.355469c77.550781 14.234376 135 82.496094 135 162.273438zm-180-45c33.082031 0 60 26.914062 60 60s-26.917969 60-60 60c-33.085938 0-60-26.914062-60-60s26.914062-60 60-60zm15-120v91.257812c-4.878907-.824218-9.890626-1.257812-15-1.257812-5.109376 0-10.121094.433594-15 1.257812v-91.257812zm-161.433594 130.097656c10.933594-53.628906 50.621094-99.441406 101.433594-119.144531v91.128906c-26.878907 15.582031-45 44.671875-45 77.917969 0 49.625 40.375 90 90 90 9.371093 0 18.414062-1.441406 26.914062-4.113281l70.585938 94.113281h82.5v15c0 8.269531-6.730469 15-15 15h-105v62h-150v-159.539062c-1.132813-1.707032-77.734376-57.914063-56.433594-162.363282zm0 0"/>
      <path d="m180.492188 240c16.542968 0 30-13.457031 30-30s-13.457032-30-30-30c-16.542969 0-30 13.457031-30 30s13.457031 30 30 30zm0 0"/></svg>
        
        <div id="login"></div>
          <ul id="menuPrincipal">
              <li>MENU 1</li>
              <li>MENU 2</li>
              <li>MENU 3</li>
              <li>MENU 4</li>
              <li>MENU 5</li>  
          </ul>
      </nav>
      <hr>
    </header>
    <section>
      <article>
       

      </article>
    </section>
  </body>
</html>
li{margin:0;padding:0;}
h1 {
  text-align:center;
  margin: 0 20px;
}
nav{margin:0px; padding: 0px;}
body{
  background: #5a5555c4;
  color: whitesmoke;
}
#onOff{
  position:absolute;
  top:70px;
  left:90%;
}
#onOff path{
  fill:lime;
  
}

nav>svg {
  position:absolute;
  left:3%;
  top:70px
}
nav > #login{
  position:absolute;
  left:15%;
  top:90px;
  color:KHAKI;
}
nav > #logo{
  position:absolute;
  left:75%;
  top:70px;
  
  color: aquamarine;
  font-size: 1.7em;
}
nav > ul{
  display:grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 5pX;
  background: darkblue;
  margin-left:5px;
  padding:70px 10px;
}
nav li{
  background: grey;
  
  font-weight:blod;
  font-size:1.3em;
  color: brown;
  
  padding: 12px auto;
  list-style:none;
}
@media (max-width:500px){
  nav > #logo{
    left: 60%;
  }
  #login{
    left:40%;
  }
}
var miLoging =  document.getElementsByTagName("svg")[0];
var textoLogin =document.getElementById("login");
var encendido= true;

  if(typeof(Storage)!=="undefined") {

      miLoging.addEventListener("click", function(){
          if(encendido==true){
                localStorage.setItem("Login", prompt("Inserta tu Login"));
                textoLogin.style.color="whitesmoke";
                textoLogin.innerHTML=localStorage.getItem("Login");
                $("#onOff path").css({"fill":"red"});
                $("#teleOperador path").css({"fill": "black"}); 

                encendido=false;
          }else{
                   $("#onOff path").css({"fill":"lime"});  
                   localStorage.removeItem("Login");
                   textoLogin.innerHTML = "Estas deslogado";
                   textoLogin.style.color="#a325d6";
                   $("#teleOperador path").css({"fill": "brown"});
                   encendido=true;
                                }

       });



  }else{ 
    alert("Su navegador no soporta webStorage");
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js