Modern web apps often need to store data in the browser—such as user preferences, cart items, form data, login tokens, or theme selections.
JavaScript provides LocalStorage for this and JSON to store data in a structured format.

Understanding these two will help you build user-friendly, persistent features without needing a backend.

---

What Is LocalStorage?

LocalStorage is a built-in browser storage system that allows you to save data directly on the user’s device.

Key points:

• Stores data as key–value pairs

• Data never expires unless manually cleared

• Only supports strings

• Can store up to ~5MB in most browsers

This makes it ideal for:

• Saving cart items

• Storing user theme preference

• Saving form inputs

• Saving login tokens (not recommended for sensitive data)

Example:

localStorage.setItem("name", "Adiba");

---

Basic LocalStorage Methods

localStorage.setItem("key", "value");  // Save
localStorage.getItem("key");          // Read
localStorage.removeItem("key");       // Remove one
localStorage.clear();                 // Remove all

Example:

localStorage.setItem("city", "Pune");
console.log(localStorage.getItem("city"));

---

Why JSON Is Needed

LocalStorage can only store strings.
But we often need to store objects or arrays.

Example object:

const user = { name: "Adiba", age: 25 };

We cannot store this directly.
So we use JSON to convert objects into strings and back.

---

JSON.stringify() and JSON.parse()

These two functions allow storing structured data.

Convert object → string

JSON.stringify(user);

Convert string → object

JSON.parse(storedValue);

Example:

const user = { name: "Adiba", role: "Frontend Developer" };

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

const data = JSON.parse(localStorage.getItem("user"));
console.log(data.role);

---

Why JSON Is Important

• Most APIs return JSON data

• Makes data transferable between systems

• Helps store complex data in LocalStorage

• Used across JavaScript, Node.js, Angular, React, Python, etc.

JSON is the universal data language of the web.

---

Day 7 Practical Tasks (Copy-Paste Ready)

Below are tasks ready to test directly in your browser console or your HTML project.

---

1. Save User Name to LocalStorage

localStorage.setItem("username", "Adiba");
console.log(localStorage.getItem("username"));

---

2. Save an Object Using JSON

const profile = {
  name: "Adiba",
  city: "Pune",
  stack: "Frontend"
};

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

const savedProfile = JSON.parse(localStorage.getItem("profile"));
console.log(savedProfile.city);

---

3. Save an Array (e.g., Cart Items)

const cart = ["Shoes", "Bag", "Bottle"];

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

const savedCart = JSON.parse(localStorage.getItem("cart"));
console.log(savedCart[1]); // Bag

---

4. Remove a Specific Item

localStorage.removeItem("cart");

---

5. Clear All LocalStorage

localStorage.clear();

---

6. Save Form Input in LocalStorage (Live Saving)

HTML

<input id="email" placeholder="Enter Email" />
<p id="show"></p>

JavaScript

const email = document.getElementById("email");
const show = document.getElementById("show");

email.addEventListener("input", () => {
  localStorage.setItem("emailValue", email.value);
  show.textContent = email.value;
});

// Load saved data on refresh
window.addEventListener("load", () => {
  const saved = localStorage.getItem("emailValue");
  if (saved) {
    email.value = saved;
    show.textContent = saved;
  }
});

---

7. Dark Mode Toggle Using LocalStorage

HTML

<button id="toggle">Toggle Theme</button>

JavaScript

const toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  const current = localStorage.getItem("theme");

  if (current === "dark") {
    document.body.style.background = "white";
    localStorage.setItem("theme", "light");
  } else {
    document.body.style.background = "#222";
    localStorage.setItem("theme", "dark");
  }
});

// On page load
window.addEventListener("load", () => {
  const saved = localStorage.getItem("theme");
  if (saved === "dark") {
    document.body.style.background = "#222";
  }
});

---

Closing Line

LocalStorage lets you persist data directly in the browser, and JSON helps convert complex objects into a format that can be saved and restored easily—skills that form a strong foundation for building modern web applications.

---

Completing JavaScript is a milestone worth celebrating. You’ve covered everything from variables and functions to DOM events, LocalStorage, and JSON—each skill forming the foundation of real frontend development. With this, you’ve built the core mindset every developer needs: understanding how the browser works, how data flows, and how user interactions shape the UI. This completes your JavaScript basics journey and opens the door to mastering frameworks like Angular with confidence.