❮ Previous Next ❯

Storage

  • Detailed explanation of Storage APIs like localStorage and sessionStorage.

  • Introduction to Browser Storage

    Modern web applications need to store data on the client side to:

    • Remember user preferences

    • Save login state

    • Improve performance

    • Reduce server requests

    • Enhance user experience

    Browsers provide Web Storage APIs that allow JavaScript to store data locally.

    In this lesson, we will cover:

    1. Local Storage

    2. Session Storage

    What Is Web Storage ?

    Web Storage allows web applications to store data in the browser as key–value pairs.

    JavaScript provides two main storage objects:

    • localStorage

    • sessionStorage

    These are part of the Web Storage API.

    Key Characteristics of Web Storage

    • Stores data in key–value format

    • Data is stored as strings

    • Data is stored in the browser

    • Faster than cookies

    • No data sent to server automatically

    Local Storage

    What Is Local Storage ?

    Local Storage is a type of browser storage that allows data to be stored permanently in the browser.

    Data stored in local storage does not expire, even after:

    • Browser refresh

    • Browser restart

    • System restart

    Data is removed only when:

    • It is deleted manually

    • Browser cache is cleared

    • JavaScript removes it

    Real-Life Use Cases of Local Storage

    • Remembering dark/light theme

    • Saving user settings

    • Storing shopping cart items

    • Remembering login state (non-sensitive)

    • Language preferences

  • Syntax of Local Storage

    Local storage is accessed using the localStorage object.

    Storing Data in Local Storage

    setItem()

    localStorage.setItem("username", "Rahul");

    Retrieving Data from Local Storage

    getItem()

    let user = localStorage.getItem("username");

    console.log(user);


    Removing a Specific Item

    removeItem()

    localStorage.removeItem("username");

    Clearing All Local Storage Data

    clear()

    localStorage.clear();

    Storing Numbers in Local Storage

    Local storage stores everything as strings.

    localStorage.setItem("age", 25);

    console.log(typeof localStorage.getItem("age"));

    Storing Objects in Local Storage

    Objects must be converted to JSON.

    Store Object

    let user = {

      name: "Amit",

      age: 24

    };

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

    Retrieve Object

    let data = JSON.parse(localStorage.getItem("userData"));

    console.log(data.name);

    Important Points About Local Storage

    • Maximum size: ~5–10 MB (varies by browser)

    • Data is domain-specific

    • Data persists until manually removed

    • Accessible only by JavaScript on the same domain

    Session Storage

    What Is Session Storage ?

    Session Storage is a type of browser storage that stores data only for the duration of a session.

    A session lasts until:

    • The browser tab is closed

    Once the tab is closed, all session storage data is cleared automatically.

    Real-Life Use Cases of Session Storage

    • Temporary form data

    • One-time login session

    • Page-to-page data transfer

    • OTP verification flow

    • Wizard or multi-step forms

    Syntax of Session Storage

    Session storage is accessed using the sessionStorage object.

    Storing Data in Session Storage

    sessionStorage.setItem("sessionUser", "Admin");

    Retrieving Data from Session Storage

    let sessionUser = sessionStorage.getItem("sessionUser");

    console.log(sessionUser);

    Removing a Specific Item

    sessionStorage.removeItem("sessionUser");

    Clearing All Session Storage Data

    sessionStorage.clear();

    Session Storage vs Local Storage (Key Difference)

    Feature

    Local Storage

    Session Storage

    Lifetime

    Permanent

    Until tab closes

    Browser refresh

    Data persists

    Data persists

    Tab close

    Data persists

    Data cleared

    Storage size

    Larger

    Same limit

    Use case

    Long-term data

    Temporary data

    Common Mistakes

    • Storing sensitive data (passwords, tokens)

    • Forgetting data is stored as string

    • Not using JSON.stringify() for objects

    • Confusing session storage with cookies

    • Assuming session storage works across tabs

    Security Considerations

    • Never store passwords

    • Avoid storing authentication tokens

    • Use HTTPS

    • Validate data before using it

    • Clear storage on logout

    Best Practices for Browser Storage

    • Store only necessary data

    • Clean up unused storage

    • Use meaningful keys

    • Use local storage for preferences

    • Use session storage for temporary data

    • Always parse and stringify objects properly

LocalStorage Theme Example

Stores and retrieves user preference using localStorage. 

// Save theme
localStorage.setItem("theme", "dark");

// Load theme
let theme = localStorage.getItem("theme");
if (theme === "dark") {
  document.body.classList.add("dark-mode");
}

Session Storage Login Example

Uses sessionStorage to store and check login status temporarily. 

sessionStorage.setItem("isLoggedIn", "true");

if (sessionStorage.getItem("isLoggedIn")) {
  console.log("User is logged in");
}

  • Performance Notes

    • Accessing storage is synchronous

    • Avoid excessive reads/writes

    • Cache values in variables when needed

❮ Previous Next ❯