Teach Your App to Remember!

🧠 What is Browser Memory?

Imagine your web browser has a secret backpack. It's called localStorage! You can put little notes inside it, like 'Highest Score: 50'. The browser will keep that note safe in its backpack, even if you turn off the computer. When you come back, the note is still there!

Build a High-Score Clicker Game! 🍪

You've seen how it works, now let's build something fun! We're going to create a simple "cookie clicker" style game that remembers your score every time you come back.

Step 1: The HTML Foundation 🏗️

First, we need a button to click and a place to show our score.

<button id="clicker-button">Click me!</button>
<h2>Score: <span id="score-display">0</span></h2>

Step 2: Make it Clickable with JavaScript! ✨

Now, let's add some JavaScript to make the score go up with each click.

let currentScore = 0;
const clickerButton = document.getElementById('clicker-button');
const scoreDisplay = document.getElementById('score-display');

clickerButton.addEventListener('click', () => {
  currentScore++;
  scoreDisplay.innerText = currentScore;
});

Step 3: The Secret Sauce - localStorage! 💾

This is where the magic happens! Every time the score changes, we'll save it to our browser's secret backpack (localStorage). Think of it like a school locker: setItem puts something *in* the locker with a label, and getItem uses that label to get it back *out*.

clickerButton.addEventListener('click', () => {
  currentScore++;
  scoreDisplay.innerText = currentScore;
  // Save the new score to localStorage!
  localStorage.setItem('myGameScore', currentScore);
});

Step 4: Load Your Saved Score 🔄

Finally, when the page first loads, we need to check the backpack to see if there's already a score saved.

// When the page loads...
window.addEventListener('load', () => {
  const savedScore = localStorage.getItem('myGameScore');
  if (savedScore) {
    currentScore = parseInt(savedScore); // Convert string back to a number
    scoreDisplay.innerText = currentScore;
  }
});

// An object with lots of data
const playerProfile = { 
  name: "Pan", 
  level: 5, 
  inventory: ["sword", "shield"] 
};

// Turn the object into a string to save it
localStorage.setItem('playerData', JSON.stringify(playerProfile));

// Get the string back and turn it into an object again!
const loadedDataString = localStorage.getItem('playerData');
const loadedProfile = JSON.parse(loadedDataString);

console.log(loadedProfile.name); // Prints "Pan"