Session storage Vs. Local storage

Have you ever closed a tab on your browser and then realized that you lost all the data you had entered into a form? Or maybe you refreshed a page and had to start all over again. That's where session storage and local storage come in! In this blog, I'll talk about what they are, how to implement them using code, and some use cases.

What is Session Storage?

Session storage is a type of storage that allows you to store data temporarily during a user's session on your website. This means that the data will be lost when the user closes the browser tab or window. Session storage is useful for storing temporary data that you don't need to persist between sessions.

Let's Implement Session Storage Using Code

You can use the sessionStorage object to store data in session storage. Here's an example:

// store data in session storage
sessionStorage.setItem('name', 'Tom');

// Retrieve data from session storage
var username = sessionStorage.getItem('name');

In this example, we are storing the username 'Tom' in session storage and then retrieving it later using the getItem method.

What is Local Storage?

Local storage is another type of storage that allows you to store data on a user's computer permanently (yes, permanently!). This means that the data will persist even after the user closes the browser or restarts their computer. Local storage is useful for storing data that you want to keep between sessions, such as user preferences or login information, theme information etc. Do not store sensitive data in local storage!

Let's Implement Local Storage Using Code

You can use the localStorage object to store data in local storage. Here's an example:

// Store data in local storage
localStorage.setItem('name', 'Tom');

// Retrieve data from local storage
var username = localStorage.getItem('name');

In this example, we are storing the username 'John' in local storage and then retrieving it later using the getItem method.

But, where is this data stored?

Just follow these steps:

1. Right-click in your browser window and select the "Inspect" option present at the bottom.

2. Click on the "Application" tab and there you will see the "session storage" and "local storage" options.

3. Refer to the screen-shots given below

Use Cases for Session Storage and Local Storage

Session storage and local storage are useful for a variety of use cases. Here are some examples:

1. Storing form data: You can use session storage to store form data temporarily while the user fills out the form. This way, if they accidentally close the tab or window, they won't lose all their progress.

2. Saving user preferences: You can use local storage to store user preferences, such as language settings or theme preferences. This way, the user won't have to set their preferences every time they visit your website.

3. Remembering login information: You can use local storage to store login information so that the user doesn't have to enter their credentials every time they visit your website.

4. Saving theme preferences: You can use local storage to store theme preference (light/ dark)

In conclusion, session storage and local storage are powerful tools for storing data in the browser. By implementing them using code, you can improve the user experience on your website and make it more convenient for users to interact with your site.

More to say about cookies in the next blog...