Lesson on Local Storage in JavaScript

Local Storage allows web applications to store data in the browser for persistent access. This data is stored in key-value pairs and persists even when the browser is closed and reopened.

What is Local Storage?

Local storage is a feature built into every modern web browser that allows websites to store small amounts of data directly on a user’s device. Think of it as a simple notepad that a website can write to and read from — the data stays there even after you close the tab or shut down your computer. It lives inside the browser and is completely separate from any server or database. Each website gets its own isolated storage space, so one site can never access another site’s data.

Key Features of Local Storage

Local storage stores data as simple key-value pairs — like a dictionary where every piece of information has a label (the key) and a value. Both must be text strings. It can hold around 5MB of data per website, which is plenty for preferences and lightweight app state, but not suitable for large files or media. Data stored in localStorage has no expiration date. It persists indefinitely until the user clears their browser storage or the website explicitly deletes it. It’s also accessible across all tabs and windows open to the same website.

Game Status: Not Started

Common Use Cases for Local Storage

  • Theme preferences: Saving whether a user prefers dark or light mode so their choice is remembered on return visits
  • Shopping carts: Keeping cart contents intact if a user closes the browser mid-browse Form auto-save — preserving a user’s in-progress writing so an accidental page refresh doesn’t wipe it
  • User settings Storing language selection, font size, or layout preferences locally without needing an account
  • Recently viewed items Tracking which articles, products, or pages a user has visited
  • Simple game progress Saving scores or level completion for lightweight browser games

What Local Storage is not good for

  • Sensitive Data: passwords, authentication tokens, or personal information should never be stored in local storage, as it can be easily accessed by malicious scripts if the site is compromised.
  • Large Data: local storage is not designed for storing large amounts of data. If you need to store more than a few megabytes, consider using IndexedDB or a server-side database instead.
  • Complex Data Structures: local storage only supports string data. If you need to store objects or arrays, you’ll need to serialize them to JSON before saving and parse them back when retrieving.

Example:

%js

// Save the user's name
localStorage.setItem("username", "alex123");

// Retrieve it
const user = localStorage.getItem("username");
console.log(user); // "alex123"

How to Implement Into Your Game:

%js

interact: function () {
                if (!this.collected) {
                    this.collected = true;
                    const coinsCollected = parseInt(localStorage.getItem('coinsCollected') || '0');
                    const newTotal = coinsCollected + this.value;
                    localStorage.setItem('coinsCollected', newTotal);
                    console.log(`Coin collected! Total coins: ${newTotal}`);
                }
            }

In this example, we’ll use local storage to save a player’s high score in a simple JavaScript game. Whenever the player achieves a new high score, we will update the local storage with that value. When the game loads, we will check local storage for an existing high score and display it.

Conclusion

Local storage is best thought of as a lightweight memory for a website. It’s a convenient place to save small bits of user-specific information that make the experience feel more personalized and seamless. It requires no login, no server round-trip, and no setup, making it one of the simplest tools available to web developers for improving the user experience.