Element gone after page refresh?

When someone enters the website I want them to not see some elements, but when user type in pass and username admin I want him to display newprojection element. It works but when I refresh the page it's gone. I tried web storage here but it still gone after page refresh.

document.getElementById('newprojection').style.display = "none";
document.getElementById('buyticket').style.display = "none";
document.getElementById('newuser').style.display = "none";

function validate() {
  localStorage.setItem('test', boom);
  var boom = document.getElementById('newprojection').style.display = '';
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username == 'admin' && password == 'admin') {
    localStorage.getItem(test);
  }
}

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a id="newprojection" href="newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="buyticket.html">Buy a ticket</a></li>
        <li><a id="newuser" href="newuser.html">New user</a></li>
        <li class="current"><a id="login" href="login.html">Log in</a></li>
        <li>
          <a id="nameofuser" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div class="container">
  <form>
    <p>Username</p>
    <input id="username" type="text" name="username" required>
    <p>Password</p>
    <input id="password" type="password" name="password" required>
    <a type="submit" id="login2" onclick="validate()">Login</a>
  </form>
</div>

Solution

Well, you can try this. It's not working as a snippet as invoking localStorage methods causes a SecurityException in my firefox.

document.getElementById('newprojection').style.display = "none";	
document.getElementById('buyticket').style.display = "none";
document.getElementById('newuser').style.display = "none";

function validate(){
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	if ( username == 'admin' && password == 'admin'){
    document.getElementById('newprojection').style.display = '';
		localStorage.setItem('isAdmin', 'true');
	}
}

window.onload = function() {
  var isAdmin = localStorage.getItem('isAdmin');
  if (isAdmin === 'true') {
    document.getElementById('newprojection').style.display = '';
  }
};

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
	<title>movBLANK | Log in</title>
</head>
<body>

<header>
	<div class="container">
		<div id="branding">
			<h1><span id="logo">mov</span>BLANK</h1>
		</div>
		<nav>
			<ul>
				<li><a href="../index.html">Home</a></li>
				<li><a id="newprojection" href="newprojection.html">New projection</a></li>
				<li><a id="buyticket" href="buyticket.html">Buy a ticket</a></li>
				<li><a id="newuser" href="newuser.html">New user</a></li>
				<li class="current"><a id="login" href="login.html">Log in</a></li>
				<li><a id="nameofuser" href="#"></a></li>
			</ul>
		</nav>
	</div>
</header>

<div class="container">
	<form>
		<p>Username</p>
        <input id="username" type="text" name="username" required>
        <p>Password</p>
        <input id="password" type="password" name="password" required>
        <a type="submit" id="login2" onclick="validate()">Login</a>
	</form>
</div>

<script src="../js/login.js" type="text/javascript"></script>
</body>
</html>

As you see, the validate function only shows the element when the user and password are 'admin'/'admin' and not before. If this is true, then se store and isAdmin property in localStorage. At page loading, we check for the existence of that property, and, if it does exist and is 'true', then we show again the hidden elements without the need to fill the form again.

Let me tell you, however, that this way of 'securising' an application is just wrong. Anyone can examine your code and know how to bypass your 'security'. And in any case, if they want to show the hidden items they can do it through the browser's developer tools.