HTML5 Local Storage
Store Data in Browser Using localStorage and sessionStorage

HTML5 Local Storage: Store Data That Sticks

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.

1. What Is localStorage?

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" ]

2. What Is sessionStorage?

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>

3. Setting, Getting, and Removing Data

| Action | Code | |--------|------| | Save | localStorage.setItem("key", "value") | | Read | localStorage.getItem("key") | | Remove | localStorage.removeItem("key") | | Clear all | localStorage.clear() |

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: 🍌, 🍎, 🍒

5. Important Notes and Best Practices

• 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"]

Summary

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

What’s Next?

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.