Login e Senha Localstorage

Shopbox scripts

by thvinic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  
</div>
<div id="not-login">
  username:adi password:adi
  <br>
  username:budi password:budi<br>
  <input type="text" id="username" placeholder="username"><br>
<input type="text" id="password" placeholder="pasword"><br>
<button id="kirim">Login</button>
</div>
<div id="login">
  selamat datang
  <button id="logout">Logout</button>
</div>

CSS

@charset "utf-8";
        @import url(http://weloveiconfonts.com/api/?family=fontawesome);

        [class*="fontawesome-"]:before {
          font-family: 'FontAwesome', sans-serif;
        }

        body {
          font: 87.5%/1.5em 'Open Sans', sans-serif;
          margin: 0;
        }

        p {
          line-height: 1.5em;
        }

        after { clear: both; }

        .login {
          margin: 50px auto;
          width: 320px;
        }

        .login form {
          margin: auto;
          padding: 22px 22px 22px 22px;
          width: 100%;
          border-radius: 5px;
          background: #282e33;
          border-top: 3px solid #434a52;
          border-bottom: 3px solid #434a52;
        }

        .login form span {
          background-color: #363b41;
          border-radius: 3px 0px 0px 3px;
          border-right: 3px solid #434a52;
          color: #606468;
          display: block;
          float: left;
          line-height: 50px;
          text-align: center;
          width: 50px;
          height: 50px;
        }

        .login form input[type="email"] {
          background-color: #3b4148;
          border-radius: 0px 3px 3px 0px;
          color: #a9a9a9;
          margin-bottom: 1em;
          padding: 0 16px;
          width: 90%;
          height: 50px;
        }

        .login form input[type="password"] {
          background-color: #3b4148;
          border-radius: 0px 3px 3px 0px;
          color: #a9a9a9;
          margin-bottom: 1em;
          padding: 0 16px;
          width: 90%;
          height: 50px;
        }

        .login form input[type="submit"] {
          background: #b5cd60;
          border: 0;
          width: 100%;
          height: 40px;
          border-radius: 3px;
          color: white;
          cursor: pointer;
          transition: background 0.3s ease-in-out;
        }
        #login form input[type="submit"]:hover {
          background: #16aa56;
        }

JavaScript

//ambil data localstorage user kalau ada
var storeS = localStorage.getItem("users");
//check kalau tidak ada dibuat
if(storeS==null){
  //json array users
  var users = [{
    username:'adi',
    password:'adi'
  },{
    username:'budi',
    password:'budi'
  }];
  //membuat localstorage user 
  //catatan data yang dimasukkan ke localstorage harus string
  //json stringify membuat convert json jadi string
  localStorage.setItem("users",JSON.stringify(users));
}
//fungsi mengambil data dari localstorage 
function getUserUsername(username) {
    //convert dahulu menggunakan json parse untuk menggunakan json yang berupa string tadi
    // .filter untuk memfilter data json
    return JSON.parse(localStorage.getItem('users')).filter(users => users.username === username)
}
$(document).ready(function(){
  //ketika button diclick
  $("#not-login").hide();
  $("#login").hide();
  var login = localStorage.getItem("login");
  if(login!=null){
    if(login=="true"){
      $("#content").html($("#login").html());          
    }else{
      $("#content").html($("#not-login").html());      
    }
  }else{
    $("#content").html($("#not-login").html());
  }
  $("#logout").click(function(){
    localStorage.removeItem("login");
    //karena location.reload tidak diizinkan di codepen     
    window.location.href=window.location.href;

  })
  $("#kirim").click(function(){
    //mengambil username value
    var username= $("#username").val();
    //mengabmil password value
    var password= $("#password").val();
    //check apakah username ada
    //trim digunakan untuk menghilangkan spasi diawal dan akhir
    if(getUserUsername(username.trim()).length>0){
      //karena bentuk array kita harus mengambil index ke 0
      var user = getUserUsername(username.trim())[0];
      //check password di localstorage dengan inputan
      if(user.password == password.trim()){
        alert("Ativado com sucesso!");
        localStorage.setItem("login","true");
      //karena location.reload...