JavaScript Session Storage

❮ Prev Next ❯

Session storage is a type of web storage that allows you to store data for the duration of the page session.

Unlike local storage, which persists even after the browser is closed, session storage is cleared when the page session ends.

This makes it ideal for storing temporary data that only needs to be available during a single browsing session.

Setting Data in Session Storage

To set data in session storage, you use the sessionStorage.setItemmethod.

This method takes two arguments: a key and a value. Both the key and the value are stored as strings. 


sessionStorage.setItem("username" , "JaneDoe");
sessionStorage.setItem("sessionId" , "abc123");

In the above example, the key-value pairs username: JohnDoeand sessionId: abc123are stored in session storage.

Getting Data from Session Storage

To retrieve data from session storage, you use the sessionStorage.getItemmethod.

This method takes a single argument, the key, and returns the value associated with that key. 


let username = sessionStorage.getItem("username");
let sessionId = sessionStorage.getItem("sessionId");
console.log(username);; // Outputs: JohnDoe
console.log(sessionId);; // Outputs: sessionId

Here, the values for usernameand sessionIdare retrieved and logged to the console.

Removing Data from Session Storage

To remove data from session storage, you use the sessionStorage.removeItemmethod.

This method takes a single argument, the key, and removes the key-value pair associated with that key. 


sessionStorage.removeItem("username");

In the above example, the usernamekey-value pair is removed from session storage.

Clearing All Data from Session Storage

If you need to clear all data stored in session storage, you can use the sessionStorage.clearmethod.

This method removes all key-value pairs stored in session storage. 


sessionStorage.removeItem("username");

This command will remove all data stored in session storage.

Storing Complex Data in Session Storage

Since session storage only stores strings, you need to serialize complex data types like objects or arrays into strings using JSON.stringifybefore storing them.

To retrieve and use this data, you need to parse it back into its original form using JSON.parse. 


let user = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com"
};

// Store object as string
sessionStorage.removeItem("username", JSON.stringify(use) );

// Retrieve and parse object
let retrievedUser = JSON.parse(sessionStorage.getItem("user"));

console.log(retrievedUser.name); // Outputs: John Doe
console.log(retrievedUser.age); // Outputs: 30
console.log(retrievedUser.email); // Outputs: john.doe@example.com

In the above example, an object is serialized into a JSON string before being stored, and then parsed back into an object when retrieved.

Checking for Session Storage Support

Not all browsers support session storage, so it's good practice to check for support before using it.

You can do this by checking for the presence of sessionStoragein the window object. 


if (typeof(Storage) !== "undefined" ){ 
  // Session storage is supported
  sessionStorage.setItem("test" , "testValue");
  console.log(sessionStorage.getItem("test")); // Outputs: testValue
}else {
  // Session storage is not supported
  console.log("Session storage is not supported by this browser.");
}

This code checks if session storage is available and then uses it accordingly.

Use Cases for Session Storage

Session storage is useful for storing data that should only be available during a single browsing session.

Common use cases include:

  • Storing temporary form data
  • Keeping track of user navigation within a session
  • Storing temporary state information for single-page applications
  • Maintaining state across page reloads without permanent storage

Session storage in JavaScript provides a simple and efficient way to store temporary data on the client side.

It is ideal for storing data that only needs to persist for the duration of a single browsing session.

Understanding how to set, get, update, and remove data in session storage is essential for developing modern web applications that require temporary client-side storage.

Let's learn about in the next chapter.

❮ Prev Next ❯