HTML5 Local Storage

Sometimes you need to save data in the browser — a username, a theme preference, a to-do list. That’s where localStorage and sessionStorage come in. They’re part of the Web Storage API and allow you to store key-value pairs in a user’s browser without cookies or server calls.

localStorage stores data with no expiration time. It stays even when the browser is closed or the machine is restarted. Data is stored per domain and accessible via JavaScript.

Basic Example

<button onclick="saveFruit()">Save Apple</button>
<button onclick="getFruit()">Load Fruit</button>
<p id="output"></p>

<script>
function saveFruit() {
  localStorage.setItem("fruit", "Apple");
}

function getFruit() {
  const fruit = localStorage.getItem("fruit");
  document.getElementById("output").innerText = fruit ? "Saved: " + fruit : "No fruit found.";
}
</script>

[ Click "Save Apple" → then "Load Fruit" → Displays: "Saved: Apple" ]

sessionStorage works like localStorage, but data only lasts for the duration of the browser tab. Close the tab, and it's gone. It’s perfect for temporary data like session state.

<button onclick="saveSessionFruit()">Save Cherry in Session</button>
<button onclick="getSessionFruit()">Load Session Fruit</button>
<p id="sessionOutput"></p>

<script>
function saveSessionFruit() {
  sessionStorage.setItem("fruit", "Cherry");
}

function getSessionFruit() {
  const fruit = sessionStorage.getItem("fruit");
  document.getElementById("sessionOutput").innerText = fruit ? "Session: " + fruit : "Session is empty.";
}
</script>

Example: Clear Storage

<button onclick="clearAll()">Clear Local Storage</button>
<script>
function clearAll() {
  localStorage.clear();
  alert("Local storage cleared!");
}
</script>

4. Use Cases for localStorage

• Remembering user preferences (e.g., dark mode)
• Saving to-do lists, drafts, or shopping carts
• Storing user-selected items like fruit: 🍌, 🍎, 🍒

• Stored data is always a string. Use JSON.stringify() for objects.
• Storage is domain-specific and limited (around 5MB per domain).
• Do not store sensitive or personal data — it’s accessible to any script running on the page.

Storing an Array

const fruits = ["Apple", "Banana", "Cherry"];
localStorage.setItem("fruitList", JSON.stringify(fruits));

const loadedFruits = JSON.parse(localStorage.getItem("fruitList"));
console.log(loadedFruits); // Output: ["Apple", "Banana", "Cherry"]

HTML5’s Web Storage API gives you powerful tools for storing and retrieving data in the browser. You’ve learned how to:

• Use localStorage to persist data
• Use sessionStorage for temporary session-based storage
• Work with key-value pairs using setItem, getItem, removeItem, and clear

Choose the option that lists all and only the correct statements.

1. setItem()
2. getItem()
3. removeItem()
4. clear()

Choose the option that lists all and only the correct statements.

1. Saving user preferences (like theme or language)
2. Storing login session tokens securely
3. Caching frequently accessed data for offline use
4. Temporary form data between page reloads

Next, we’ll look at how to sync localStorage with user interfaces, build mini data-driven apps like a to-do list, and explore IndexedDB for more complex structured storage.