JavaScript Local Storage: Syntax, Usage, and Examples

JavaScript local storage lets you store key-value pairs in a user’s browser with no expiration time. Data remains even after the page reloads or the browser closes, making it useful for saving user preferences and application state.

How to Use Local Storage in JavaScript

Local storage provides methods to store, retrieve, update, and remove data.

Basic Syntax


                  
                    jsx
                    
                  
                  
                    // Save data
localStorage.setItem("username", "Alice");

// Retrieve data
let username = localStorage.getItem("username");

// Remove data
localStorage.removeItem("username");

// Clear all data
localStorage.clear();

setItem(key, value): Stores data under a key.
getItem(key): Retrieves stored data.
removeItem(key): Deletes specific data.
clear(): Deletes all stored data.

When to Use Local Storage in JavaScript

Use local storage when you need to store simple, persistent data on a user’s device.

Save user preferences like theme or language settings.
Store form inputs so users don’t lose data when they refresh the page.
Keep user authentication tokens for faster login.

Examples of Local Storage in JavaScript

Storing and Retrieving User Preferences

You can store user-selected theme preferences.


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

let theme = localStorage.getItem("theme");
console.log("Current theme:", theme);

Storing Objects in Local Storage

Local storage only supports strings. Convert objects to JSON with JSON.stringify() before storing them.


                  
                    jsx
                    
                  
                  
                    let user = { name: "Alice", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// Retrieve and parse data
let retrievedUser = JSON.parse(localStorage.getItem("user"));
console.log("User:", retrievedUser);

Removing and Resetting Local Storage

To remove a specific item:


                  
                    jsx
                    
                  
                  
                    localStorage.removeItem("user");

To reset everything:


                  
                    jsx
                    
                  
                  
                    localStorage.clear();

Learn More About Local Storage in JavaScript

Checking if Local Storage is Available

Not all browsers support local storage. Check before using it.


                  
                    jsx
                    
                  
                  
                    if (typeof Storage !== "undefined") {
  console.log("Local storage is available");
} else {
  console.log("Local storage is not supported");
}

Handling Expiration in Local Storage

Local storage does not have built-in expiration. You need to implement it manually.


                  
                    jsx
                    
                  
                  
                    let now = new Date().getTime();
let expiry = now + 1000 * 60 * 60; // Expires in 1 hour
localStorage.setItem("expiryTime", expiry);

// Check expiration
if (new Date().getTime() > localStorage.getItem("expiryTime")) {
  localStorage.removeItem("expiryTime");
  console.log("Stored data expired");
}

Clearing Local Storage on Logout

When logging out a user, clearing local storage removes sensitive data.


                  
                    jsx
                    
                  
                  
                    function logout() {
  localStorage.clear();
  console.log("User logged out, local storage cleared");
}

Adding and Removing Items Dynamically

You can store lists and update them dynamically.


                  
                    jsx
                    
                  
                  
                    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

tasks.push("Finish project");
localStorage.setItem("tasks", JSON.stringify(tasks));

console.log("Tasks:", JSON.parse(localStorage.getItem("tasks")));

Accessing Local Storage in JavaScript

Accessing stored data is simple.


                  
                    jsx
                    
                  
                  
                    let savedData = localStorage.getItem("username");
console.log("Saved username:", savedData);

Using Local Storage in a To-Do List

Local storage helps maintain a to-do list across sessions.


                  
                    jsx
                    
                  
                  
                    function addTask(task) {
  let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks.push(task);
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function getTasks() {
  return JSON.parse(localStorage.getItem("tasks")) || [];
}

addTask("Buy groceries");
console.log("Current tasks:", getTasks());

Comparing Local Storage with Session Storage

Both store data in the browser, but session storage clears data when the tab closes.


                  
                    jsx
                    
                  
                  
                    sessionStorage.setItem("sessionKey", "sessionValue");
console.log(sessionStorage.getItem("sessionKey")); // Data removed after closing tab

Handling Large Data in Local Storage

Local storage has a 5MB limit per domain. Store large datasets on a server instead of local storage.