How to Implement the JavaScript Object sessionStorage

How to Implement the JavaScript Object sessionStorage

In this JavaScript Object tutorial, you'll learn how to implement the JavaScript Object sessionStorage. SessionStorage and LocalStorage allows to save key/value pairs in a web browser. Using sessionStorage in a JavaScript Application.

Recently I built a single page application using vanilla JavaScript on the frontend and Rails as an api for the backend. One of the first issues I came across when building out this application was the inability for the frontend to communicate with the backend without sending a fetch to my SessionsController every single time.

The process of sending a fetch every time I needed to check who was logged in and then sending another fetch from the response of the first fetch to actually do what I needed to do didn’t seem very effective to me. This isn’t a huge issue in the grand scheme of things, however it got to be a bit tedious. My brain went down the rabbit hole of trying to learn how to use session cookies that are stored in your browser.

Unfortunately all of the documentation I found involved installing some type of middleware into my application that, probably because of a user error on my end, never worked properly for me. After a few hours of trying to get this to work I felt that I was stuck in the same place for too long, I decided that there had to be an easier way for me to store my logged in users id on the frontend and after some digging I discovered the javascript object sessionStorage. According to W3, ‘The … sessionStorage properties allow [you] to save key/value pairs in a web browser.’ This was the golden ticket I needed, and I’m going to explain to you how I used sessionStorage in my application.

Having had my user model set up, and the form for user login/signup built, my issue kept arising when I would reload the page to reset my DOM. Each time the DOM would load my application would have no knowledge of the user that I had signed in or created before the reload. As a regular user of any website, my vision was that unless a user logged out explicitly, the session should persist. This isn’t a universal rule, however most websites (Amazon, Twitter, GitHub) don’t log a user out when the user closes or reloads the webpage, and if they did it would be a little annoying. The problem as I saw it was that my frontend needed to recognize that there was a user logged in. This is what sessionStorage was built for. Implementing this was simple; when a user successfully logged in, set the id of the user to the key :user-id inside of the sessionStorage object.

Image for post

fetch sent when user is signed in

This set a key/value pair to persist throughout my application as is unless explicitly set to something else or reset. Anywhere in my application at any point during my session, sessionStorage.user_id will return my current :user_id. This is useful for several reasons. For starters, now when I load my DOM, I can set a conditional to check the sessionStorage object.

javascript web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.