Browser Session Storage Guide

TL;DR

This guide explains how to use browser session storage – a way for websites to store data temporarily while you’re using them. It’s useful for things like shopping carts or keeping track of user preferences during a single visit.

What is Session Storage?

Session storage is similar to cookies, but it has some key differences:

• Temporary: Data stored in session storage only lasts for the duration of the browser tab or window. Once you close it, the data is gone.
• Security: Session storage is more secure than cookies because it’s not automatically sent with every HTTP request.
• Capacity: Usually larger capacity than cookies (typically 5-10MB).

How to Use Session Storage

1. Accessing Session Storage: You access session storage using the sessionStorage object in JavaScript.

Storing Data

To store data, use the setItem() method:

sessionStorage.setItem('username', 'john.doe');

This stores the string ‘john.doe’ with the key ‘username’. You can store any string value.

Retrieving Data

To retrieve data, use the getItem() method:

const username = sessionStorage.getItem('username');
console.log(username); // Output: john.doe

Removing Data

To remove a specific item from session storage, use the removeItem() method:

sessionStorage.removeItem('username');

This deletes the ‘username’ key and its associated value.

Clearing All Data

To clear all data from session storage, use the clear() method:

sessionStorage.clear();

This removes all keys and values stored in session storage for the current tab/window.

Checking if Session Storage is Available

Before using session storage, it’s good practice to check if it’s supported by the browser:

function supportsSessionStorage() {
  try {
    sessionStorage.setItem('test', 'test');
    sessionStorage.removeItem('test');
    return true;
  } catch (e) {
    return false;
  }
}

if (supportsSessionStorage()) {
  // Session storage is supported
  console.log('Session storage is available!');
} else {
  // Session storage is not supported
  console.log('Session storage is not available.');
}

Example: Simple Shopping Cart

Here’s a basic example of using session storage to store items in a shopping cart:

1. Add Item:

function addItemToCart(item) {
  let cartItems = sessionStorage.getItem('cart') || '[]'; // Get existing cart or create empty array
  cartItems = JSON.parse(cartItems);
  cartItems.push(item);
  sessionStorage.setItem('cart', JSON.stringify(cartItems));
}

addItemToCart('Red T-Shirt');

2. Get Cart Items:

function getCartItems() {
  const cart = sessionStorage.getItem('cart') || '[]';
  return JSON.parse(cart);
}

const itemsInCart = getCartItems();
console.log(itemsInCart); // Output: ['Red T-Shirt']

Important Considerations

• Data Types: Session storage can only store strings. For other data types (numbers, objects, arrays), you need to convert them to JSON strings using JSON.stringify() before storing and parse them back using JSON.parse() when retrieving.
• Security: Don’t store sensitive information like passwords or credit card details in session storage.
• Browser Compatibility: Session storage is supported by all modern browsers.