Local Storage and Session Storage in JavaScript

· JS Module

In modern web development, browsers give us a small storage space to save data directly inside the user's browser.
This is called Web Storage API.

There are two important types:

  1. Local Storage
  2. Session Storage

Both store data in key-value pairs.

Think of them like tiny cupboards inside the browser:

  • Local Storage → remembers even after browser closes.
  • Session Storage → forgets when tab closes.

Why Web Storage Was Introduced

Earlier, developers used cookies to store small data.

But cookies had problems:

  • Very small storage size
  • Sent to server with every request
  • Slower
  • Complex handling

So HTML5 introduced:

  • localStorage
  • sessionStorage

Fast. Simple. Browser-based.

Basic Syntax

localStorage.setItem("key", "value");
sessionStorage.setItem("key", "value");

Both work almost the same way.

LOCAL STORAGE

What is Local Storage?

Local Storage stores data permanently in browser until:

  • user deletes it manually
  • browser cache is cleared
  • JavaScript removes it

Even if browser restarts, data remains.

Real-Life Example

Imagine:

You visit a website and select:

  • Dark Mode
  • Language = Urdu
  • Font Size = Large

Next day you open site again.

Website remembers your settings.

That is usually done using Local Storage.

Local Storage Methods

Method Purpose
setItem() Store data
getItem() Read data
removeItem() Remove one item
clear() Remove all items
key() Get key by index

1. setItem()

Stores data.

Syntax

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

Example

localStorage.setItem("city", "Mumbai");

Now browser stores:

city = Mumbai

2. getItem()

Reads stored data.

Example

let city = localStorage.getItem("city");

console.log(city);

Output

Mumbai

3. removeItem()

Deletes one item.

Example

localStorage.removeItem("city");

Now "city" is removed.

4. clear()

Deletes everything.

Example

localStorage.clear();

All local storage data erased.

5. key()

Gets key name using index.

Example

console.log(localStorage.key(0));

Full Local Storage Example

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage</title>
</head>
<body>

<input type="text" id="name">
<button onclick="saveData()">Save</button>
<button onclick="showData()">Show</button>

<script>

function saveData() {

    let name = document.getElementById("name").value;

    localStorage.setItem("username", name);

    alert("Data Saved!");
}

function showData() {

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

    alert(user);
}

</script>

</body>
</html>

Logic Behind Local Storage

Step-by-Step Flow

Step 1

User enters data.

let name = document.getElementById("name").value;

Step 2

Data stored in browser.

localStorage.setItem("username", name);

Browser saves:

username = entered value

Step 3

Later data retrieved.

localStorage.getItem("username");

SESSION STORAGE

What is Session Storage?

Session Storage stores data only for current browser tab/session.

When tab closes → data disappears.

Real-Life Example

Suppose:

You are filling a long online exam form.

If page refreshes accidentally, form data remains.

But after tab closes, data disappears.

That temporary memory is often managed using Session Storage.

Session Storage Methods

Exactly same as local storage:

Method Purpose
setItem() Store
getItem() Read
removeItem() Remove one
clear() Remove all

Example

sessionStorage.setItem("course", "JavaScript");

Retrieve:

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

console.log(course);

Full Session Storage Example

<!DOCTYPE html>
<html>
<head>
    <title>Session Storage</title>
</head>
<body>

<input type="text" id="email">
<button onclick="saveEmail()">Save</button>

<script>

function saveEmail() {

    let email = document.getElementById("email").value;

    sessionStorage.setItem("userEmail", email);

    alert("Session Data Saved");
}

</script>

</body>
</html>

Difference Between Local Storage and Session Storage

Feature Local Storage Session Storage
Lifetime Permanent Temporary
Removed When Manually deleted Tab/browser closes
Storage Limit ~5MB ~5MB
Shared Across Tabs Yes No
Use Case Remember settings Temporary session data

Important Point: Data Type

Web Storage stores only strings.

Even numbers become strings.

Example

localStorage.setItem("age", 25);

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

Output

string

Storing Objects and Arrays

Because storage only supports strings, objects must be converted using:

  • JSON.stringify()
  • JSON.parse()

Store Object Example

Step 1: Create Object

let student = {
    name: "Anas",
    age: 22
};

Step 2: Convert to JSON String

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

Step 3: Retrieve Data

let data = localStorage.getItem("student");

Step 4: Convert Back to Object

let obj = JSON.parse(data);

console.log(obj.name);

Output

Anas

Complete Object Example

let car = {
    brand: "Toyota",
    model: "Fortuner"
};

localStorage.setItem(
    "carData",
    JSON.stringify(car)
);

let storedCar = JSON.parse(
    localStorage.getItem("carData")
);

console.log(storedCar.brand);

Practical Use Cases

Local Storage Use Cases

1. Dark Mode

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

2. Remember Login Preference

localStorage.setItem("rememberMe", "true");

3. Language Preference

localStorage.setItem("language", "Urdu");

Session Storage Use Cases

1. OTP Verification Flow

Temporary data stored during verification.

2. Multi-Step Forms

Store progress temporarily.

3. Shopping Checkout Session

Temporary cart/session tracking.

Checking Storage in Browser

In Chrome:

  1. Right Click
  2. Inspect
  3. Application
  4. Local Storage / Session Storage

You can see all stored data there.

Security Warning

Never store:

  • Passwords
  • Banking details
  • Sensitive tokens

Because JavaScript can access storage easily.

Local Storage vs Cookies

Feature Local Storage Cookies
Size ~5MB ~4KB
Sent to Server No Yes
Speed Faster Slower
Expiry Manual Can expire automatically

Mini Project Example — Dark Mode

<!DOCTYPE html>
<html>
<head>
<style>

.dark {
    background: black;
    color: white;
}

</style>
</head>
<body>

<button onclick="darkMode()">
Toggle Dark Mode
</button>

<script>

function darkMode() {

    document.body.classList.toggle("dark");

    localStorage.setItem(
        "theme",
        "dark"
    );
}

window.onload = function () {

    let theme = localStorage.getItem("theme");

    if(theme === "dark") {
        document.body.classList.add("dark");
    }
}

</script>

</body>
</html>

Logic of Dark Mode Project

First Visit

No data exists.

User Clicks Button

Theme saved:

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

Next Visit

Browser checks:

localStorage.getItem("theme");

If dark exists → dark mode automatically applied.

Advantages

Local Storage

  • Simple
  • Fast
  • Persistent
  • No server dependency

Session Storage

  • Temporary memory
  • Good for sensitive temporary data
  • Isolated per tab

Limitations

  • Only strings supported
  • Not secure for sensitive data
  • Limited storage size
  • Different browser = different storage

Interview Questions

Q1: Difference between localStorage and sessionStorage?

Local storage persists permanently.
Session storage disappears after tab closes.

Q2: Can localStorage store objects?

Not directly.
Use:

JSON.stringify()

and

JSON.parse()

Q3: Is localStorage secure?

No. Sensitive data should not be stored there.

Final Concept Summary

Concept Meaning
localStorage Permanent browser storage
sessionStorage Temporary tab-based storage
setItem() Store data
getItem() Retrieve data
removeItem() Remove single item
clear() Remove all
JSON.stringify() Object → String
JSON.parse() String → Object

Web storage is like memory written upon the sand of the browser:

  • Local Storage carves deeper marks that survive tomorrow.
  • Session Storage is like a footprint washed away when the tide of the tab closes.

A wise JavaScript developer knows not only how to store data — but what deserves permanence and what should fade with the session.

List of Modules

Anas Khan
Written by