JavaScript Local Storage and Session Storage

JavaScript Local Storage and Session Storage

The Web Storage API provides two mechanisms for storing data in the browser: localStorage and sessionStorage. Unlike cookies, these storage types are not sent to the server with every request. They are ideal for persisting user preferences, cached data, and application state between sessions.

Basic localStorage Operations

// Store a string
localStorage.setItem('username', 'alice');

// Retrieve a string
const username = localStorage.getItem('username');
console.log(username); // 'alice'

// Remove one item
localStorage.removeItem('username');

// Clear all items
localStorage.clear();

Storing Objects

localStorage only stores strings. To save objects or arrays, use JSON.stringify() when storing and JSON.parse() when retrieving.

const settings = {
  theme: 'dark',
  language: 'en',
  fontSize: 16
};

// Store object
localStorage.setItem('settings', JSON.stringify(settings));

// Retrieve object
const saved = localStorage.getItem('settings');
const parsedSettings = saved ? JSON.parse(saved) : {};
console.log(parsedSettings.theme); // 'dark'

A Practical Helper Pattern

const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('Storage error:', error);
    }
  },
  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.error('Parse error:', error);
      return defaultValue;
    }
  },
  remove(key) {
    localStorage.removeItem(key);
  }
};

storage.set('tasks', [{ id: 1, text: 'Learn JS', done: false }]);
const tasks = storage.get('tasks', []);
console.log(tasks);

sessionStorage

// Same API as localStorage
sessionStorage.setItem('currentStep', '2');
const step = sessionStorage.getItem('currentStep');
console.log(step); // '2'
// This data disappears when the tab or browser is closed