JavaScript: sessionStorage

In this tutorial, you will learn everything about javascript sessionStorage & as well as types of methods in sessionStorage.

JavaScript sessionStorage

• What is sessionStorage?
• JavaScript sessionStorage methods
• Example of sessionStorage
• sessionStorage with condition statement Loop

What is sessionStorage in JavaScript?

In JavaScript, sessionStorage is a type of web storage that allows storing data locally within the user’s browser and it clear when the page session ends. This data will be deleted when the browser is closed and will not be available when the browser is opened again.

JavaScript sessionStorage methods

There are six basic JavaScript sessionStorage methods to use sessionStorage in your web applications for access and work with sessionStorage:

1. setItem(): Add key and value to sessionStorage
2. getItem(): Retrieve a value by the key from sessionStorage
3. removeItem(): Remove an item by key from sessionStorage
4. clear(): Clear all sessionStorage
5. key(): Passed a number to retrieve nth key of a  sessionStorage
6. length – the number of stored items.

sessionStorage setItem

The setItem() method allows us to store data locally in key-value pairs within the user’s browser.

The following syntax represents the setItem() method:

sessionStorage.setItem(key, 'Value');

Here,

• The key means by which name the data will be stored locally.
• Value means what value you will store in the associate key.

Note that sessionStorage can only store strings.

sessionStorage getItem

The getItem() method allows to fetch data using a particular key within the user’s browser

The following syntax represents the getItem() method:

sessionStorage.getItem('key') 

Here,

• The name of the key you want to retrieve the value of.

sessionStorage removeItem

The removeItem() method allows to remove data using a particular key within the user’s browser

The following syntax represents the removeItem() method:

sessionStorage.removeItem('key') 

Here,

• The name of the key you want to delete the value of.

sessionStorage clear

The clear() method allows to clear or delete all local storage data within the user’s browser

The following syntax represents the clear() method:

sessionStorage.clear() 

sessionStorage key

The key() method allows to passing a number or index to sessionStorage to retrieve the name of the key.

The following syntax represents the key() method:

sessionStorage.key(index);

sessionStorage length

The length method allows to get the presence of items stored locally in the within the user’s browser:

The following syntax represents the length method:

sessionStorage.length

Examples of SessionStorage

Using the set method, we will set values into session storage:

var user = {
 firstName : "John",
 lastName : "Smith"
}
sessionStorage.setItem("id", JSON.stringify(user));

Note that the data is deleted when the browser tab is closed.

The getItem() method allows you to access the data stored in the browser’s sessionStorage object. It accepts only one parameter which is the key and returns the value as a string. To retrieve the user object from the key stored above:

sessionStorage.getItem('id');

This returns a string with value as;

"{"firstName":"John","lastName":"Smith"}"

To use this value, you would have to convert it back to an object using JSON.parse() method.

JSON.parse(sessionStorage.getItem('id'));

Let’s use the removeItem() method to remove the item from the key. Let’s remove the user object previously-stored using setItem() method:

sessionStorage.removeItem('id');

This method, when invoked clears the entire storage of all records for that domain. It does not receive any parameters.

sessionStorage.clear();

The key() method comes in handy in situations where you need to loop through keys and allows you pass a number or index to local storage to retrieve the name of the key.

var KeyName = sessionStorage.key(index);

sessionStorage with Condition statement and Loop

If you want to check some items in sessionStorage, you can use javascript if else statement. The following example represents how to use sessionStorage data with if-else statement:

if (sessionStorage.length > 0) {
  // We have items
} else {
  // No items
}

Next, if you want to iterate sessionStorage data, you can use javascript for loop. The following example represents how to iterate sessionStorage items with for loop:

for (let i = 0; i < sessionStorage.length; i++){
  let key = sessionStorage.key(i);
  let value = sessionStorage.getItem(key);
  console.log(key, value);
}

Recommended JavaScript Tutorials