Working with the Storage API

What is the Storage API?

localStorage vs sessionStorage

Both mechanisms allow you to store key-value pairs, but they differ in their scope and lifespan.

Core Concepts & Differences

Feature	localStorage	sessionStorage
Lifetime	Indefinite (until explicitly cleared)	Only until the tab or window closes
Scope	Available across all tabs/windows with same origin	Limited to the tab/window where it was created
Storage limit	~5–10 MB per origin	Same as localStorage
Use cases	Theme settings, auth tokens, caches	Shopping cart in a single tab, transient data
Data Transfer	Not sent to server	Not sent to server

Methods and Usage

Storing Data

Use setItem(key, value) to store a key-value pair. Values are automatically converted to strings.

// Store data
localStorage.setItem('username', 'frostybee');
sessionStorage.setItem('formData', 'incomplete');

javascript

Getting Data

Use getItem(key) to retrieve a value. Returns null if the key doesn’t exist.

// Retrieve data
const username = localStorage.getItem('username'); // 'frostybee'
const formData = sessionStorage.getItem('formData'); // 'incomplete'

javascript

Removing Data

Use removeItem(key) to delete a specific key-value pair.

// Remove specific item
localStorage.removeItem('username');
sessionStorage.removeItem('formData');

javascript

Clearing All Data

Use clear() to remove all key-value pairs for the storage object.

// Clear all data
localStorage.clear();
sessionStorage.clear();

javascript

Checking Storage Length

Use the length property to get the number of stored key-value pairs.

// Get number of items
console.log(localStorage.length); // e.g., 2
console.log(sessionStorage.length); // e.g., 1

javascript

Accessing Keys

Use key(index) to get the key at a specific index.

// Get key by index
const firstKey = localStorage.key(0); // e.g., 'username'

javascript

Storing Complex Data

// Store an object
const user = { name: 'Frostybee', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// Retrieve and parse the object
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 'Frostybee'

javascript

Note: Always handle potential parsing errors with try-catch:

try {
  const data = JSON.parse(localStorage.getItem('user'));
} catch (error) {
  console.error('Error parsing JSON:', error);
}

javascript

Storing User Preferences

function saveUserPreferences() {
  const preferences = {
    theme: document.getElementById('theme-selector').value,
    fontSize: document.getElementById('font-size').value,
    notifications: document.getElementById('notifications').checked
  };

  localStorage.setItem('userPreferences', JSON.stringify(preferences));
}

function loadUserPreferences() {
  const storedPrefs = localStorage.getItem('userPreferences');

  if (storedPrefs) {
    const preferences = JSON.parse(storedPrefs);
    document.getElementById('theme-selector').value = preferences.theme;
    document.getElementById('font-size').value = preferences.fontSize;
    document.getElementById('notifications').checked = preferences.notifications;
  }
}

// Load preferences when page initializes
document.addEventListener('DOMContentLoaded', loadUserPreferences);

javascript