Why Use Browser Storage?

Sometimes, you need to save information on a user's computer without using a server. Common use cases include:

  • Saving user preferences (e.g., dark mode vs. light mode).
  • Keeping a user logged in across page refreshes.
  • Storing the contents of a shopping cart.
  • Saving the state of an application so a user can continue where they left off.
The Web Storage API: localStorage and sessionStorage

These two APIs are nearly identical. They provide a simple way to store data as key-value pairs. The only data type they can store is strings.

localStorage Data stored in localStorage is persistent. It stays until the user manually clears their browser cache or your web app deletes it. It's shared across all tabs and windows from the same origin (domain).

The API is very simple:

  • localStorage.setItem('key', 'value'): Save a key-value pair.
  • localStorage.getItem('key'): Retrieve a value by its key.
  • localStorage.removeItem('key'): Delete a specific key-value pair.
  • localStorage.clear(): Delete all items.

JavaScript


// Save a user's theme preference
localStorage.setItem('theme', 'dark');

// Retrieve the preference on a different page or later visit
const userTheme = localStorage.getItem('theme'); // Returns 'dark'
console.log(userTheme);

// Remove the item
localStorage.removeItem('theme');

// Check again
console.log(localStorage.getItem('theme')); // Returns null

Storing Objects Since you can only store strings, how do you save a JavaScript object? You convert it to a JSON string first!

JavaScript


const userSettings = {
  username: 'alex',
  notifications: true,
  volume: 80
};

// 1. Stringify the object to save it
localStorage.setItem('settings', JSON.stringify(userSettings));

// 2. To use it again, get the string and parse it back into an object
const savedSettingsString = localStorage.getItem('settings');
const savedSettingsObject = JSON.parse(savedSettingsString);

console.log(savedSettingsObject.username); // 'alex'

sessionStorage The sessionStorage API is exactly the same as localStorage, with one crucial difference: data in sessionStorage is tied to a browser tab session. It is cleared automatically as soon as the user closes the tab.

This is useful for temporary data that shouldn't persist forever, like data for a multi-step form.

JavaScript


// Data stored here will be gone when the tab is closed
sessionStorage.setItem('formStep1Data', 'some temporary info');
A Quick Look at IndexedDB

What if you need to store a lot of complex data, like thousands of records, and need to query it efficiently? localStorage would be too slow and limited (usually to about 5-10MB).

This is where IndexedDB comes in. It is a full-fledged, transactional database inside the browser.

  • Asynchronous: Its operations don't block the main thread, keeping your UI responsive.
  • Stores Objects: It can store almost anything, including complex JavaScript objects, files, and blobs.
  • Transactional: Ensures data integrity.

IndexedDB's API is much more complex, involving opening databases, creating object stores (like tables), and handling transactions and cursors. It's overkill for simple data, but essential for building offline-first applications or apps that handle large client-side datasets.