JavaScript Essentials - Session Storage

Using session storage in web applications

Session storage is a web storage API that allows you to store data for the duration of a page session. This tutorial covers the basics of using session storage in web applications, including how to set, get, and remove items from session storage.

Setting Items in Session Storage

You can use the sessionStorage.setItem() method to store items in session storage. Here is an example:

sessionStorage.setItem('username', 'Alice');
sessionStorage.setItem('theme', 'dark');

console.log('Items set in session storage');
                

Getting Items from Session Storage

You can use the sessionStorage.getItem() method to retrieve items from session storage. Here is an example:

const username = sessionStorage.getItem('username');
const theme = sessionStorage.getItem('theme');

console.log('Username:', username); // Output: Username: Alice
console.log('Theme:', theme); // Output: Theme: dark
                

Removing Items from Session Storage

You can use the sessionStorage.removeItem() method to remove items from session storage. Here is an example:

sessionStorage.removeItem('username');

console.log('Username removed from session storage');
                

Clearing All Items from Session Storage

You can use the sessionStorage.clear() method to remove all items from session storage. Here is an example:

sessionStorage.clear();

console.log('All items cleared from session storage');
                

Storing Complex Data in Session Storage

Session storage can only store strings. To store complex data such as objects or arrays, you need to serialize the data using JSON.stringify() before storing it, and deserialize it using JSON.parse() when retrieving it. Here is an example:

const user = {
    name: 'Alice',
    age: 25,
    preferences: {
        theme: 'dark',
        language: 'en'
    }
};

// Serialize the object to a JSON string
sessionStorage.setItem('user', JSON.stringify(user));

// Retrieve and deserialize the JSON string
const storedUser = JSON.parse(sessionStorage.getItem('user'));

console.log('Stored User:', storedUser);
// Output: Stored User: {name: "Alice", age: 25, preferences: {theme: "dark", language: "en"}}
                

Checking for Session Storage Support

Not all browsers support session storage. It is a good practice to check for session storage support before using it. Here is an example:

if (typeof(Storage) !== 'undefined') {
    console.log('Session storage is supported');
} else {
    console.error('Session storage is not supported');
}
                

Use Cases for Session Storage

Here are some common use cases for session storage:

• Storing temporary data for the duration of a session.
• Preserving form data across page reloads.
• Storing temporary application state.
• Saving user input temporarily before final submission.

Summary

In this tutorial, you learned about using session storage in web applications, including how to set, get, remove, and clear items from session storage. You also explored storing complex data and checking for session storage support. Understanding session storage is essential for building web applications that require temporary data storage in the browser.