Lesson 52 - Working with `localStorage` in JavaScript

The localStorage object in JavaScript allows you to store key-value pairs in a web browser permanently. The data persists even when the page is refreshed or the browser is closed.

Key Features of localStorage

• Stores data with no expiration.
• Stores only strings (you need to convert objects/arrays to JSON).
• Can store up to 5MB of data per domain.
• Only accessible from the same origin (same protocol, domain, and port).

Basic Syntax

// Save data to localStorage
localStorage.setItem("key", "value");

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

// Remove a specific item
localStorage.removeItem("key");

// Clear all localStorage data
localStorage.clear();

Example 1: Storing and Retrieving Data

// Store a username
localStorage.setItem("username", "JohnDoe");

// Retrieve the stored username
let user = localStorage.getItem("username");

console.log(user); // Output: "JohnDoe"

Example 2: Storing Objects in localStorage

Since localStorage can only store strings, we use JSON.stringify() to store objects and JSON.parse() to retrieve them.

let user = { name: "Alice", age: 25 };

// Convert object to JSON string and store it
localStorage.setItem("user", JSON.stringify(user));

// Retrieve and convert back to an object
let storedUser = JSON.parse(localStorage.getItem("user"));

console.log(storedUser.name); // Output: "Alice"
console.log(storedUser.age); // Output: 25

Example 3: Removing and Clearing Data

// Remove a single item
localStorage.removeItem("username");

// Clear all localStorage data
localStorage.clear();

Try Your Hand

Steps:

1. Create a File:

   • Name it lesson52-localStorage.html.

2. Write the Code:
   Copy and paste the following:

   
      Lesson 52 - localStorage
   
      Save and Retrieve Data with localStorage
   
      Save Name
      Show Name
   
          function saveUser() {
              let name = document.getElementById("username").value;
              localStorage.setItem("username", name);
              alert("Name saved!");
          }
   
          function showUser() {
              let name = localStorage.getItem("username");
              document.getElementById("output").textContent = "Saved Name: " + name;
          }
   

3. Save the File.

4. Open in a Browser and Test it!

Experiment

1. Store a list of favorite colors using localStorage.
2. Create a theme switcher that saves the user's preferred theme.
3. Build a simple to-do list that persists using localStorage.

Key Takeaways

• localStorage stores persistent data in the browser.
• Data remains even after refresh or browser restart.
• You must convert objects to JSON before storing.
• localStorage.clear() deletes all stored data.