APIs & Browser

localStorage & sessionStorage

Client-side data storage with Web Storage API

Find videos you like?

Save to resource drawer for future reference!

What is Web Storage API?

Simple key-value storage in the browser

The Web Storage API provides two mechanisms for storing data in the browser: localStorage and sessionStorage. Both store data as key-value pairs and provide a simple API for data persistence.

localStorage

• Persistent: Data never expires
• Survives: Browser restarts, tab closes
• Shared: Same origin (domain)
• Capacity: ~5-10 MB per origin
• Use case: User preferences, theme settings

sessionStorage

• Temporary: Data cleared when tab closes
• Session-specific: Per tab/window
• Isolated: Not shared between tabs
• Capacity: ~5-10 MB per origin
• Use case: Form data, temporary state

Basic API Methods

Simple CRUD operations for storage

Method	Description	Example
`setItem(key, value)`	Store data	`localStorage.setItem('user', 'John')`
`getItem(key)`	Retrieve data	`localStorage.getItem('user')`
`removeItem(key)`	Delete specific item	`localStorage.removeItem('user')`
`clear()`	Delete all items	`localStorage.clear()`
`key(index)`	Get key by index	`localStorage.key(0)`

Important Note

Web Storage only stores strings. Use JSON.stringify() and JSON.parse() for objects and arrays.

Storing Complex Data

Working with objects and arrays

Storing and Retrieving Objects

Use JSON methods to handle complex data types

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Practical Example: User Preferences Manager

Complete example with theme persistence

Theme Preference Manager

Save and restore user theme selection

javascript

code

DarkEditable

// UserPreferences Class
class UserPreferences {
  constructor() {
    this.storageKey = 'userPreferences';
  }
  
  // Load preferences from localStorage
  load() {
    const data = localStorage.getItem(this.storageKey);
    return data ? JSON.parse(data) : this.getDefaults();
  }
  
  // Save preferences to localStorage
  save(preferences) {
    localStorage.setItem(
      this.storageKey, 
      JSON.stringify(preferences)
    );
  }
  
  // Get default preferences
  getDefaults() {
    return {
      theme: 'light',
      fontSize: 16,
      notifications: true,
      language: 'en'
    };
  }
  
  // Update specific preference
  update(key, value) {
    const prefs = this.load();
    prefs[key] = value;
    this.save(prefs);
  }
}

// Usage
const prefs = new UserPreferences();

// Load saved preferences or use defaults
const userSettings = prefs.load();
console.log(userSettings.theme); // "light"

// Update theme preference
prefs.update('theme', 'dark');

// Apply theme to page
document.body.className = userSettings.theme + '-theme';

Console Output

Click "Run Code" to see output here...

Storage Events

Listen for storage changes across tabs

The storage event fires when storage is modified in another tab/window. This allows you to sync data across multiple tabs.

Listening to Storage Changes

Sync data between browser tabs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Note

The storage event does NOT fire in the same tab that made the change. It only notifies other tabs/windows.

Best Practices & Limitations

Do's

• Always use try-catch for JSON.parse()
• Check if storage is available before using
• Use meaningful key names
• Compress large data before storing
• Clear sensitive data when done
• Use sessionStorage for temporary data

Don'ts

• Don't store sensitive data (passwords, tokens)
• Don't exceed storage limits (~5-10MB)
• Don't assume storage is always available
• Don't store functions or Date objects directly
• Don't use for critical data (can be cleared)
• Don't forget to handle parse errors

Security Warning

Data in localStorage and sessionStorage is NOT encrypted and can be accessed by any JavaScript code running on your site. Never store sensitive information like passwords, credit cards, or personal data.

Key Takeaways

Simple API

Easy-to-use key-value storage interface

localStorage

Persistent storage across sessions

sessionStorage

Temporary storage per tab/window

JSON Support

Store complex objects with JSON methods

Previous Topic

Working with REST APIs

Consuming RESTful APIs with JavaScript.

Next Topic

Cookies

Working with browser cookies for data persistence.

Ask a Question

Have a question about localStorage & sessionStorage? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

APIs & Browser

localStorage & sessionStorage

Client-side data storage with Web Storage API

Find videos you like?

Save to resource drawer for future reference!

What is Web Storage API?

Simple key-value storage in the browser

The Web Storage API provides two mechanisms for storing data in the browser: localStorage and sessionStorage. Both store data as key-value pairs and provide a simple API for data persistence.

localStorage

• Persistent: Data never expires
• Survives: Browser restarts, tab closes
• Shared: Same origin (domain)
• Capacity: ~5-10 MB per origin
• Use case: User preferences, theme settings

sessionStorage

• Temporary: Data cleared when tab closes
• Session-specific: Per tab/window
• Isolated: Not shared between tabs
• Capacity: ~5-10 MB per origin
• Use case: Form data, temporary state

Basic API Methods

Simple CRUD operations for storage

Method	Description	Example
`setItem(key, value)`	Store data	`localStorage.setItem('user', 'John')`
`getItem(key)`	Retrieve data	`localStorage.getItem('user')`
`removeItem(key)`	Delete specific item	`localStorage.removeItem('user')`
`clear()`	Delete all items	`localStorage.clear()`
`key(index)`	Get key by index	`localStorage.key(0)`

Important Note

Web Storage only stores strings. Use JSON.stringify() and JSON.parse() for objects and arrays.

Storing Complex Data

Working with objects and arrays

Storing and Retrieving Objects

Use JSON methods to handle complex data types

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Practical Example: User Preferences Manager

Complete example with theme persistence

Theme Preference Manager

Save and restore user theme selection

javascript

code

DarkEditable

// Usage
const prefs = new UserPreferences();

// Load saved preferences or use defaults
const userSettings = prefs.load();
console.log(userSettings.theme); // "light"

// Update theme preference
prefs.update('theme', 'dark');

// Apply theme to page
document.body.className = userSettings.theme + '-theme';

Console Output

Click "Run Code" to see output here...

Storage Events

Listen for storage changes across tabs

The storage event fires when storage is modified in another tab/window. This allows you to sync data across multiple tabs.

Listening to Storage Changes

Sync data between browser tabs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Note

The storage event does NOT fire in the same tab that made the change. It only notifies other tabs/windows.

Best Practices & Limitations

Do's

• Always use try-catch for JSON.parse()
• Check if storage is available before using
• Use meaningful key names
• Compress large data before storing
• Clear sensitive data when done
• Use sessionStorage for temporary data

Don'ts

• Don't store sensitive data (passwords, tokens)
• Don't exceed storage limits (~5-10MB)
• Don't assume storage is always available
• Don't store functions or Date objects directly
• Don't use for critical data (can be cleared)
• Don't forget to handle parse errors

Security Warning

Key Takeaways

Simple API

Easy-to-use key-value storage interface

localStorage

Persistent storage across sessions

sessionStorage

Temporary storage per tab/window

JSON Support

Store complex objects with JSON methods

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Working with REST APIs

Cookies

JavaScript Code Editor

Building Your Learning Module...

localStorage & sessionStorage

localStorage

sessionStorage

Important Note

Storing and Retrieving Objects

Theme Preference Manager

Listening to Storage Changes

Note

Do's

Don'ts

Security Warning

Key Takeaways

Simple API

localStorage

sessionStorage

JSON Support

Working with REST APIs

Cookies

JavaScript Code Editor

localStorage & sessionStorage

localStorage

sessionStorage

Important Note

Storing and Retrieving Objects

Theme Preference Manager

Listening to Storage Changes

Note

Do's

Don'ts

Security Warning

Key Takeaways

Simple API

localStorage

sessionStorage

JSON Support