How to access and set Session Variables in JavaScript

# Table of Contents

# How to access and set Session Variables in JavaScript

You can use sessionStorage.setItem() and the sessionStorage.getItem() method to access and set session variables in JavaScript.

The sessionStorage API enables you to store and access data saved in the current page session.

Here is the HTML for the example. It simply loads a JS script.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="id">bobbyhadz.com</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
/**
 * Setting session variables
 */

sessionStorage.setItem('first', 'bobby');
sessionStorage.setItem('last', 'hadz');

const arr = ['dev', 'test', 'ship'];

sessionStorage.setItem('tasks', JSON.stringify(arr));

// -----------------------------------

/**
 * Accessing session variables
 */

console.log(sessionStorage.getItem('first')); // 👉️ bobby
console.log(sessionStorage.getItem('last')); // 👉️ hadz

const parsed = JSON.parse(sessionStorage.getItem('tasks'));
console.log(parsed); // 👉️ ['dev', 'test', 'ship']

access set session variables

The code for this article is available on GitHub

The sessionStorage property is used to access a session Storage object for the current origin.

The setItem() method takes 2 parameters - a key and a value and sets the key-value pair on the Storage object.

Note that the key and the value have to be strings.

If you need to store an array or an object, make sure to use the JSON.stringify() method to convert the value to a string before storing it in sessionStorage.

index.js

Copied!
sessionStorage.setItem('tasks', JSON.stringify(arr));

The getItem() method takes a key as a parameter and returns the corresponding value.

If you previously stored a JSON string, make sure to use the JSON.parse() method to parse the value back to a native JavaScript object.

index.js

Copied!
sessionStorage.setItem('tasks', JSON.stringify(arr));

console.log(sessionStorage.getItem('first')); // 👉️ bobby

You can open the Console tab in your developer tools to look at the output of calling the sessionStorage.getItem() method.

# sessionStorage vs localStorage in JavaScript

There are 2 very similar APIs that allow you to access the Storage object:

The main difference between the two is that:

Data stored using sessionStorage is only valid for the particular Tab. When the tab is closed, the data is cleared.
Conversely, localStorage has no expiration and is not cleared when the Tab is closed.

When you open multiple tabs/windows with the same URL, a unique sessionStorage property is created for each tab/window.

On the other hand, the localStorage property is shared by all tabs/windows with the same URL.

You can view your localStorage and sessionStorage variables by opening your developer tools (F12) and selecting the Application tab.

open developer tools click application

You can expand the Local Storage or Session Storage dropdown menus in the left sidebar.

Each menu shows the currently stored key-value pairs.

To better understand the difference between session storage and local storage:

Run the following code in your browser.

index.js

Copied!
/**
 * Setting session variables
 */

sessionStorage.setItem('first', 'bobby');
sessionStorage.setItem('last', 'hadz');

const arr = ['dev', 'test', 'ship'];

sessionStorage.setItem('tasks', JSON.stringify(arr));

// -----------------------------------

/**
 * Accessing session variables
 */

console.log(sessionStorage.getItem('first')); // 👉️ bobby
console.log(sessionStorage.getItem('last')); // 👉️ hadz

const parsed = JSON.parse(sessionStorage.getItem('tasks'));
console.log(parsed); // 👉️ ['dev', 'test', 'ship']

The code for this article is available on GitHub

If you open the Application tab in your developer tools and click on Session Storage, you will see that the key-value pairs have been set.

session storage key value pairs set

Now comment out the code or remove it.
Close the browser tab and reopen it.
If you open the Application tab in your developer tools and click on Session storage, you will see that the key-value pairs have been removed.

session storage key value pairs removed

Data stored using sessionStorage is only valid for the particular Tab. When the tab is closed, the data is cleared.

# Using the localStorage property to access and set variables

Let's look at an example of using the localStorage property to access and set variables that are saved across browser sessions.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="id">bobbyhadz.com</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
/**
 * Setting variables that are saved across browser sessions
 */

localStorage.setItem('first', 'bobby');
localStorage.setItem('last', 'hadz');

const arr = ['dev', 'test', 'ship'];

localStorage.setItem('tasks', JSON.stringify(arr));

// -----------------------------------

/**
 * Accessing the variables
 */

console.log(localStorage.getItem('first')); // 👉️ bobby
console.log(localStorage.getItem('last')); // 👉️ hadz

const parsed = JSON.parse(localStorage.getItem('tasks'));
console.log(parsed); // 👉️ ['dev', 'test', 'ship']

The code for this article is available on GitHub

If I open the Console tab, I can see that the values are logged to the console.

localstorage values logged to console

You can also click on the Application tab and select Local Storage in the left sidebar.

select application local storage

As with the sessionStorage API, the setItem() method takes 2 strings - a key and a value.

If you need to store an array or an object in localStorage, make sure to stringify it.

index.js

Copied!
localStorage.setItem('tasks', JSON.stringify(arr));

When you need to retrieve the data, make sure to parse it to a native JavaScript object.

index.js

Copied!
const parsed = JSON.parse(localStorage.getItem('tasks'));

The benefit of using localStorage is that the data is preserved after you close the tab.

To better illustrate how this works:

Run the following code in your browser.

index.js

Copied!
/**
 * Setting variables that are saved across browser sessions
 */

localStorage.setItem('first', 'bobby');
localStorage.setItem('last', 'hadz');

const arr = ['dev', 'test', 'ship'];

localStorage.setItem('tasks', JSON.stringify(arr));

// -----------------------------------

/**
 * Accessing the variables
 */

console.log(localStorage.getItem('first')); // 👉️ bobby
console.log(localStorage.getItem('last')); // 👉️ hadz

const parsed = JSON.parse(localStorage.getItem('tasks'));
console.log(parsed); // 👉️ ['dev', 'test', 'ship']

The code for this article is available on GitHub

If you open the Application tab in your developer tools and click on Local Storage, you will see that the key-value pairs have been set.

select application local storage

Now comment out the code or remove it.
Close the browser tab and reopen it.
If you open the Application tab in your developer tools and click on Local storage, you will see that the key-value pairs persist between sessions.

key value pairs persist between sessions

This is because localStorage has no expiration and is not cleared when the Tab/Window is closed.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to access and set Session Variables in JavaScript

# Table of Contents