Local Storage in JavaScript

Local storage in JavaScript provides a powerful way to store data directly on the user's browser. This feature allows developers to save data that persists even after the browser is closed, unlike session-based storage. With local storage, you can optimize web applications by enabling features like offline access and saving user preferences.

In this section, we’ll cover the following topics:

What is Local Storage?

Local storage is a built-in feature in modern web browsers that allows the storage of key-value pairs directly on a user’s device. It is commonly used in web applications to store data that persists even after the user refreshes or closes the browser. Unlike cookies, local storage does not send data to the server with every HTTP request, making it more efficient for client-side storage. It provides a simple way to store data like user preferences (e.g., theme selection) or a shopping cart’s contents without the need for a backend or database.

How Local Storage Differs from Session Storage and Cookies

To understand the differences, let’s start by defining session storage and cookies:

Session Storage:

• Session storage is similar to local storage but has a shorter lifespan. It stores data only for the duration of the session, which ends when the browser tab or window is closed.
• This is useful for temporary data, such as storing inputs in a form while a user navigates between pages.

Example:

// Setting a session storage item
sessionStorage.setItem("username", "JohnDoe");

// Getting the item
const username = sessionStorage.getItem("username");
console.log(username); // Output: JohnDoe

// Data is cleared when the tab or window is closed.

Cookies:

• Cookies are small pieces of data stored on the client-side but sent with every HTTP request to the server. They are often used for authentication, analytics, or tracking.
• Cookies have additional properties, such as expires and secure, to control their lifespan and ensure secure transmission.

Example:

// Setting a cookie in JavaScript
document.cookie =
  "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Reading cookies
console.log(document.cookie); // Output: username=JohnDoe

Local Storage:

• Local storage is designed for storing larger amounts of data on the client-side, up to 5MB (varies by browser). Unlike cookies, data stored in local storage doesn’t automatically expire and isn’t sent to the server with each HTTP request.

Example:

// Setting a local storage item
localStorage.setItem("theme", "dark");

// Getting the item
const theme = localStorage.getItem("theme");
console.log(theme); // Output: dark

// Data persists even after the browser is closed.

For best results, combine client-side and server-side storage where appropriate. Use local storage for temporary or frequently accessed data, and rely on the server for critical, long-term data management.

Setting Up and Accessing Local Storage

Using localStorage.setItem() and localStorage.getItem()

The setItem() method allows you to store data in the form of key-value pairs, while getItem() retrieves it.

// Setting an item
localStorage.setItem("username", "JaneDoe");

// Retrieving an item
const username = localStorage.getItem("username");
console.log(username); // Output: JaneDoe

Removing Items with localStorage.removeItem() and localStorage.clear()

To delete specific items, use removeItem(). To clear all stored data, use clear().

// Removing a specific item
localStorage.removeItem("username");

// Clearing all items
localStorage.clear();

Implementing Local Storage with AI Assistance

Local storage’s integration into web development becomes even more efficient with AI tools. These tools help automate the process of data management and provide prompts to enhance functionality.

Preparing for Practice Files

This course takes a hands-on approach, allowing you to apply the techniques covered in real-world scenarios. We'll be using a structured folder layout. Before proceeding with the examples, please ensure the following files are prepared:

/your-project-folder/  
  |─10-01-local-storage/ (<- sub-folder)  
    |─ example-1.css  
    |─ example-1.html  
    |─ example-1.js  

For your convenience, these files are also available on our GitHub repository.

AI Case: Storing User Preferences

Storing user preferences in local storage allows applications to retain user-specific configurations like themes, layout settings, or language preferences. AI tools can generate boilerplate code for this use case.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="example-1.css" />
    <title>User Preferences with Local Storage</title>
  </head>
  <body>
    <div class="container">
      <h1>Theme Preferences</h1>
      <p>
        Use the buttons below to toggle between Light Mode and Dark Mode or
        clear the theme preference from local storage.
      </p>
      <button id="darkModeToggle">Toggle Dark Mode</button>
      <button id="clearStorage">Clear Local Storage</button>
    </div>
    <script src="example-1.js"></script>
  </body>
</html>

/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styling */
body {
  font-family: "Arial", sans-serif;
  background-color: white;
  color: black;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0; /* Updated for better contrast and readability */
}

/* Centered Container */
.container {
  text-align: center;
  padding: 20px;
  max-width: 400px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .container {
  background-color: #1e1e1e;
  border-color: #333;
}

/* Button Styling */
button {
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

body.dark-mode button {
  background-color: #28a745;
}

body.dark-mode button:hover {
  background-color: #218838;
}

const toggleButton = document.getElementById("darkModeToggle");
const clearButton = document.getElementById("clearStorage");

// Event listener to toggle Dark Mode
toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
  const isDarkMode = document.body.classList.contains("dark-mode");
  // Save the theme to local storage
  localStorage.setItem("theme", isDarkMode ? "dark" : "light");
});

// Event listener to clear local storage while keeping the current theme
clearButton.addEventListener("click", () => {
  localStorage.removeItem("theme");
  alert("Local storage cleared. The current theme remains unchanged.");
});

// Load the saved theme from local storage
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
  document.body.classList.add("dark-mode");
}

Instructions to see the results:

Save the code above in each file. Open the HTML file in your browser.

• Use the "Toggle Dark Mode" button to switch between Light Mode and Dark Mode. Your preference will be saved in local storage and persist after refreshing or reopening the browser.
• Use the "Clear Local Storage" button to remove the saved preference while keeping the current theme unchanged.

By observing the behavior after clearing the local storage, you can understand how it interacts with the application.

Watch this video to see it in action:

To explore how Local Storage works, you can also visit the following link:

Demo Web Page 41

Reference links:

MDN Web Docs: Window.localStorage

W3Schools: Window.localStorage Property