DEV Community

Cover image for The Ultimate Guide to Browser Storage: LocalStorage, IndexedDB, Cookies, and More
Dulaj Thiwanka
Dulaj Thiwanka

Posted on

The Ultimate Guide to Browser Storage: LocalStorage, IndexedDB, Cookies, and More

#frontend #javascript #browser #webdev

Modern browsers have evolved far beyond simple document viewers. Today they function almost like miniature operating systems running inside your computer. They manage memory, execute applications, cache resources, and even host databases.

One of the most powerful capabilities browsers provide is client-side storage the ability to store data directly on the user’s device.

Client-side storage allows web applications to:

  • Reduce server requests
  • Improve performance
  • Persist user preferences
  • Enable offline experiences
  • Cache network resources
  • Store complex application data

Without browser storage, modern web applications like Gmail, Notion, Spotify Web, and Figma would be significantly slower and far less capable.

In this article, we’ll explore the most important browser storage mechanisms available today:

  • Local Storage
  • Session Storage
  • Extension Storage
  • IndexedDB
  • Cookies
  • Cache Storage
  • Storage Buckets

Understanding these systems helps developers choose the right tool for each type of data.

alltyps

Why Browser Storage Exists

Before diving into each storage system, it’s helpful to understand why browsers need storage mechanisms in the first place.

Early web applications relied entirely on servers. Every user action required a network request, and every piece of state lived on the server.

This approach had several problems:

  • High latency
  • Server overload
  • No offline capability
  • Poor user experience

Client-side storage solves these issues by allowing applications to store data locally.

For example:

  • A theme preference can be stored locally instead of requested every time.
  • Cached assets can load instantly without network requests.
  • Entire applications can function offline.

Modern browsers therefore provide multiple storage systems designed for different types of data.

1. Local Storage

local

Local Storage is the most widely known browser storage API. It provides a simple way to store persistent key–value data inside the browser.

The stored data remains available even after:

  • Page reloads
  • Browser restarts
  • System restarts

This makes Local Storage ideal for storing small pieces of persistent application state.

Characteristics

  • Key–value storage
  • Stores strings only
  • Persistent across sessions
  • Around 5–10 MB per origin
  • Synchronous API

The synchronous nature means Local Storage operations block the main thread, which is why it should only be used for small data.

Basic Usage 

// Save data
localStorage.setItem("username", "dulaj");

// Retrieve data
const username = localStorage.getItem("username");

// Remove item
localStorage.removeItem("username");

// Clear all data
localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Since Local Storage only stores strings, objects must be serialized using JSON.

const user = { name: "Dulaj", age: 23 };

localStorage.setItem("user", JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem("user"));
Enter fullscreen mode Exit fullscreen mode

Storage Scope

Local Storage is scoped by origin, which means:

protocol + domain + port
Enter fullscreen mode Exit fullscreen mode

For example:

https://example.com
Enter fullscreen mode Exit fullscreen mode

A different subdomain or port creates a different storage space.

Common Use Cases

Local Storage is commonly used for:

  • UI preferences
  • Theme settings
  • Language configuration
  • Feature flags
  • Remembering user interface states

However, Local Storage is not suitable for large datasets or high-frequency operations.

2. Session Storage

session

Session Storage is extremely similar to Local Storage but with a shorter lifespan.

Instead of persisting across browser restarts, Session Storage exists only during the lifetime of a browser tab.

Once the tab closes, the stored data is permanently deleted.

Characteristics

  • Key–value storage
  • Stores strings
  • Scoped per tab session
  • Around 5 MB capacity
  • Synchronous API

Each tab has its own isolated session storage, meaning two tabs from the same website do not share session data.

Example

sessionStorage.setItem("step", "2");

const step = sessionStorage.getItem("step");
Enter fullscreen mode Exit fullscreen mode

Use Cases

Session Storage is useful when the stored data should not persist permanently.

Examples include:

  • Multi-step form progress
  • Temporary UI states
  • Checkout process data
  • Navigation history state

If the user refreshes the page, the data remains. If the tab closes, the data disappears.

3. Extension Storage

extenstion

Browser extensions operate in a different environment than normal web pages. Because of this, browsers provide a dedicated Extension Storage API.

This API allows extensions to store configuration data, cached content, and synced settings.

Types of Extension Storage

Most browsers support three storage types:

storage.local

Stores data locally on the user's device.

storage.sync

Synchronizes data across devices using the browser account.

For example:

  • Chrome sync
  • Firefox sync

storage.session

Temporary storage for the extension session.

Example 

chrome.storage.local.set({ theme: "dark" });

chrome.storage.local.get("theme", (result) => {
  console.log(result.theme);
});
Enter fullscreen mode Exit fullscreen mode

Unlike Local Storage, Extension Storage APIs are asynchronous, making them more suitable for larger data operations.

Common Use Cases

Extensions use storage for:

  • User settings
  • Feature toggles
  • Cached extension data
  • Syncing configuration across devices

4. IndexedDB

indexdb

When developers need to store large amounts of structured data, IndexedDB becomes the primary solution.

IndexedDB is a transactional NoSQL database built directly into the browser.

It allows developers to store complex data such as:

  • Objects
  • Files
  • Blobs
  • Structured datasets

Key Concepts

IndexedDB introduces several database concepts:

Database

The top-level container for stored data.

Object Store

Similar to tables in relational databases.

Index

Allows fast lookup of records.

Transaction

Ensures safe and consistent database operations.

Example 

const request = indexedDB.open("AppDatabase", 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;

  const store = db.createObjectStore("users", {
    keyPath: "id"
  });

  store.createIndex("email", "email", { unique: true });
};
Enter fullscreen mode Exit fullscreen mode

Once created, the database can store large volumes of structured data.

Advantages

IndexedDB provides several benefits:

  • Asynchronous API
  • Large storage capacity
  • Efficient querying through indexes
  • Offline functionality
  • Structured data storage

Real-World Usage

Many major applications rely on IndexedDB:

  • Gmail (offline email storage)
  • Google Docs
  • Notion
  • Figma
  • Progressive Web Apps

IndexedDB allows web apps to behave much more like native applications.

5. Cookies

cookies

Cookies are the oldest form of browser storage, originally designed to maintain state across HTTP requests.

HTTP itself is stateless, meaning each request is independent. Cookies solve this by storing small pieces of data that the browser automatically sends with each request.

Characteristics

  • Maximum size: ~4 KB
  • Automatically included in HTTP requests
  • Can have expiration times
  • Supports security flags

Example 

document.cookie = "theme=dark; path=/; expires=Fri, 31 Dec 2026 12:00:00 UTC";
Enter fullscreen mode Exit fullscreen mode

Security Flags

Cookies can be configured with additional security options.

HttpOnly

Prevents JavaScript access.

Secure

Only sent over HTTPS.

SameSite

Controls cross-site request behavior.

Example:

Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Strict
Enter fullscreen mode Exit fullscreen mode

Use Cases

Cookies are commonly used for:

  • Authentication sessions
  • Tracking identifiers
  • Personalization
  • Server-side preferences

Because cookies are included with every request, they should contain minimal data.

6. Cache Storage

cache

Cache Storage is part of the Service Worker API and is designed for storing network resources.

Instead of storing arbitrary data, it stores HTTP request–response pairs.

This enables developers to implement custom caching strategies.

Example 

const cache = await caches.open("app-cache");

await cache.add("/index.html");
await cache.add("/styles.css");
await cache.add("/app.js");
Enter fullscreen mode Exit fullscreen mode

When a user visits the site again, the cached version can be served instantly.

Benefits

Cache Storage enables:

  • Offline web applications
  • Faster loading times
  • Reduced server load
  • Advanced caching strategies

Common Strategies

Cache First

Use cache before network.

Network First

Try network first, fallback to cache.

Stale While Revalidate

Serve cached version while fetching an updated version in the background.

These strategies are widely used in Progressive Web Apps (PWAs).

7. Storage Buckets

buckets

Storage Buckets are a relatively new browser storage concept aimed at improving storage management.

Instead of storing all application data in one shared space, developers can create separate logical buckets.

Each bucket can have its own:

  • Lifetime
  • Storage quota
  • Eviction priority

Example structure:

App Storage
├── user-data
├── cache
└── temporary-files
Enter fullscreen mode Exit fullscreen mode

If the browser needs to free space, it can remove lower priority buckets first.

This prevents critical application data from being deleted unexpectedly.

Storage Buckets are still evolving but represent a major improvement in browser storage architecture.

Comparison of Browser Storage Options

Storage Type Persistence Capacity Data Type
Local Storage Persistent ~5–10 MB Strings
Session Storage Tab lifetime ~5 MB Strings
Cookies Configurable ~4 KB Strings
IndexedDB Persistent Large Structured objects
Cache Storage Persistent Large HTTP responses
Extension Storage Persistent Large JSON-like
Storage Buckets Managed Large Multiple types

How Modern Web Apps Use Browser Storage

Most production web applications combine multiple storage systems.

For example:

A Progressive Web App might use:

  • Local Storage for UI preferences
  • IndexedDB for large application data
  • Cache Storage for offline assets
  • Cookies for authentication sessions

This layered storage architecture enables fast, responsive, and reliable web applications.

Final Thoughts

Browser storage has evolved dramatically over the past decade. What once started as simple cookies has grown into a complete ecosystem of storage technologies.

Today, browsers provide:

  • Key–value storage
  • Databases
  • Network caches
  • Offline storage systems
  • Structured storage management

This capability allows web applications to behave increasingly like native desktop or mobile apps.

Understanding how each storage system works — and when to use it — is a critical skill for modern web developers building scalable and high-performance applications.

Top comments (0)