JavaScript Browser Storage Examples - Complete Tutorial | RPATechnology.in

Topic 13518 min readStructured Tutorial

Browser Storage in JavaScript: Storage Examples

Quick Answer

Browser storage in JavaScript allows web applications to store data locally on the user's device using mechanisms like localStorage, sessionStorage, and cookies. These storage types differ in scope, lifetime, and capacity, enabling developers to manage data persistence effectively for enhanced user experiences.

Learning Objectives

Explain the purpose of Storage Examples in a practical learning context.
Identify the main ideas, terms, and decisions involved in Storage Examples.
Apply Storage Examples in a simple real-world scenario or practice task.

Introduction to Browser Storage

Modern web applications often need to store data on the client side to improve performance and user experience.

JavaScript provides several browser storage options such as localStorage, sessionStorage, and cookies, each with unique characteristics.

Understanding these storage types and their use cases is essential for effective web development.

Storing data locally can make your web apps faster and more responsive.

localStorage: Persistent Client-Side Storage

localStorage allows you to store key-value pairs in the browser with no expiration time. Data persists even after the browser is closed and reopened.

It is ideal for saving user preferences, themes, or any data that should remain available across sessions.

Stores data as strings in key-value pairs.
Data persists indefinitely until explicitly cleared.
Storage limit is typically around 5MB per origin.
Accessible only within the same domain.

Example: Using localStorage

Here is a simple example demonstrating how to set, get, and remove items from localStorage.

sessionStorage: Temporary Storage for a Session

sessionStorage is similar to localStorage but data is cleared when the page session ends, such as when the browser tab is closed.

It is useful for storing data that should only persist during a single browsing session.

Data is stored as key-value string pairs.
Data is cleared when the tab or window is closed.
Storage limit is similar to localStorage (~5MB).
Data is not shared across tabs or windows.

Example: Using sessionStorage

This example shows how to store and retrieve data using sessionStorage.

Cookies: Small Data Storage with Server Communication

Cookies are small pieces of data stored in the browser and sent to the server with every HTTP request.

They are commonly used for session management, authentication, and tracking.

Limited to about 4KB of data.
Can be set with expiration dates.
Sent with every HTTP request to the server.
Accessible via JavaScript (unless HttpOnly flag is set).

Example: Setting and Reading Cookies

Below is an example of how to create, read, and delete cookies using JavaScript.

Practical Example

This example stores a username in localStorage, retrieves it, logs it to the console, and then removes it.

This example demonstrates storing a session ID in sessionStorage, retrieving it, logging it, and clearing all sessionStorage data.

This example sets a cookie named 'theme' with the value 'dark' that expires far in the future and logs all cookies.

Examples

localStorage Example

localStorage.setItem('username', 'Alice');
const user = localStorage.getItem('username');
console.log(user); // Outputs: Alice
localStorage.removeItem('username');

This example stores a username in localStorage, retrieves it, logs it to the console, and then removes it.

sessionStorage Example

sessionStorage.setItem('sessionID', '12345');
const session = sessionStorage.getItem('sessionID');
console.log(session); // Outputs: 12345
sessionStorage.clear();

This example demonstrates storing a session ID in sessionStorage, retrieving it, logging it, and clearing all sessionStorage data.

Cookie Example

document.cookie = 'theme=dark; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
console.log(document.cookie);

This example sets a cookie named 'theme' with the value 'dark' that expires far in the future and logs all cookies.

Best Practices

Use localStorage for data that should persist across sessions but is not sensitive.
Use sessionStorage for temporary data tied to a single tab or window session.
Avoid storing sensitive information in localStorage or sessionStorage as they are accessible via JavaScript.
Use cookies for data that needs to be sent to the server with requests, such as authentication tokens.
Always check for browser support before using web storage APIs.
Clear storage data when it is no longer needed to avoid unnecessary data accumulation.

Common Mistakes

Storing complex objects without serialization (use JSON.stringify and JSON.parse).
Assuming localStorage and sessionStorage are secure for sensitive data.
Not handling storage limits and errors gracefully.
Confusing sessionStorage with localStorage regarding data persistence.
Ignoring browser compatibility and fallback strategies.

Hands-on Exercise

Implement a Theme Preference Using localStorage

Create a simple web page that allows users to select a theme (light or dark) and saves their preference using localStorage. The page should remember the selected theme on reload.

Expected output: The page applies the saved theme automatically when reloaded.

Hint: Use localStorage.setItem and localStorage.getItem to save and retrieve the theme.

Session Counter Using sessionStorage

Build a page that counts how many times a user has clicked a button during the current session using sessionStorage.

Expected output: The counter resets when the browser tab is closed.

Hint: Increment a counter stored in sessionStorage each time the button is clicked.

Interview Questions

What is the difference between localStorage and sessionStorage?

Interview

localStorage stores data with no expiration and persists across browser sessions, while sessionStorage stores data only for the duration of the page session and is cleared when the tab or window is closed.

Can you store objects directly in localStorage?

Interview

No, localStorage stores data as strings. To store objects, you must serialize them using JSON.stringify before storing and parse them with JSON.parse when retrieving.

Why should sensitive data not be stored in localStorage?

Interview

Because localStorage is accessible via JavaScript, it is vulnerable to cross-site scripting (XSS) attacks, making it unsafe for storing sensitive information like passwords or tokens.