HOW TO USE localStorage TO KEEP USER LOGGED IN AND OUT WITH JAVASCRIPT

In this blog post- I will talk about what localStorage is and how it is beneficial when it comes to keeping the user logged in and out.

On my recent school project, I decided to have a login feature- so that the user can be signed in until they log out. The caveat wast that this vanilla JS assignment prohibited using authentication and authorization tools for the sake of time. Without any useful tool, you can end up writing long lines of code- and potentially lose your sanity. So big shoutout to my coach for letting me know about localStorage!

What is localStorage?

LocalStorage is a type of web storage that allows JavaScript websites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed.

Syntax

localStorage.id = <number to set up>

There are more ways to use localStorage, but I will be focusing how to retrieve id.

So, how we do it?

When a user signs up, the id will be taken and stored like so;

function postFetchForSignUp() {
  let nameInput = document.querySelector("#name")
  let usernameInput = document.querySelector("#username")
  fetch('http://localhost:3000/users', { // First, we make a Post fetch request where we want to store our users.
    method: 'POST',
    headers: {
      'Content-Type':'application/json',
      'Accept':'application/json'
    },
    body: JSON.stringify({
      name: nameInput.value,
      username: usernameInput.value
    })
  })
  .then(res=>res.json())
  .then(user => {
    localStorage.clear() // If there was a user signed in, this will                                   
                         // clear it up
    localStorage.id = user.id  // Then we can store the id we got 
    slapUser(user)
    logOutButton()
  })
}

When the user signs in, the id will be taken in and stored:

signInButton.addEventListener('click', e => {
  signInForm()
  let form = signDiv.querySelector('.sign-in')
  let usernameInput = document.querySelector("#username")
  form.addEventListener('submit', e=>{
    e.preventDefault()
    fetch('http://localhost:3000/users') // We make a get fetch    // request where users are stored
    .then(res=>res.json()) 
    .then(usersArray => { 
      let user = usersArray.find(function(user){ 
          return user.username === usernameInput.value // Then we        // check if there is a user with a value given
        })
      if (user){
        signDiv.innerHTML = ""
        slapUser(user)
        localStorage.id = user.id // If there is so, we then store // it
        logOutButton()
        writeReview()
      }
    })
  })
})

When user logs out, the localStorage will be cleared like so;

function logOutButton(){
 let logOutButton = document.createElement("button")
 logOutButton.className = "log-out-button"
 logOutButton.innerText = "Log Out"
 signDiv.append(logOutButton)
 logOutButton.addEventListener('click', e=>{
   localStorage.clear() // We clear localStorage like so
 })
}

Here is a quick localStorage demo on console;

I hope this blogpost is useful, and it will help you as much as it did for me.