Local Storage is a Web Storage API that allows you to store data in the browser as key-value pairs. The stored data remains available even after the browser is closed and reopened, until it is manually removed.

📌 What is Local Storage?

Local Storage is built into modern browsers and is accessed through thelocalStorage object. It is commonly used to store user preferences, application settings, shopping cart data, and other client-side information.

💡 Why Use Local Storage?

🛠 Local Storage Methods

📝 Storing Data

Use setItem() to save data.

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

📖 Reading Data

Retrieve data using getItem().

const username = localStorage.getItem("username");

console.log(username);

✏️ Updating Data

Updating is the same as storing—use the same key with a new value.

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

🗑️ Removing Data

Remove a specific key using removeItem().

localStorage.removeItem("username");

🧹 Clearing All Data

Remove every item stored in Local Storage.

localStorage.clear();

📊 Checking the Number of Items

console.log(localStorage.length);

🔑 Accessing Keys

Retrieve the key name stored at a specific index.

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

📦 Storing Objects

Local Storage only stores strings. Convert objects to JSON before storing.

const user = {
  name: "John",
  age: 25,
  city: "New York"
};

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

📥 Retrieving Objects

Convert the stored JSON string back into an object.

const user = JSON.parse(localStorage.getItem("user"));

console.log(user.name);
console.log(user.age);

📋 Storing Arrays

const fruits = ["Apple", "Banana", "Orange"];

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

📤 Reading Arrays

const fruits = JSON.parse(localStorage.getItem("fruits"));

console.log(fruits);

🛠 Helper Functions

Save Data

function saveData(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

Load Data

function loadData(key) {
  const data = localStorage.getItem(key);

  return data ? JSON.parse(data) : null;
}

Delete Data

function deleteData(key) {
  localStorage.removeItem(key);
}

🚀 Complete Example

const settings = {
  theme: "dark",
  language: "English",
  fontSize: 16
};

// Save
localStorage.setItem("settings", JSON.stringify(settings));

// Read
const savedSettings =
  JSON.parse(localStorage.getItem("settings"));

console.log(savedSettings);

// Delete
localStorage.removeItem("settings");

📊 Local Storage vs Session Storage vs Cookies

⚠️ Limitations

✅ Best Practices

🎯 Summary

Local Storage is a simple and powerful browser storage mechanism for saving persistent client-side data. It stores information as string-based key-value pairs, making it ideal for user preferences, application settings, and cached data. For objects and arrays, always useJSON.stringify() when saving andJSON.parse() when retrieving.