HTML Web Storage

HTML5 Web Storage lets a web page store key-value data directly inside the visitor's browser. It works like cookies, but with a much bigger storage limit (usually around 5-10MB per site instead of a few KB) and data is never sent to the server with every request, which makes it faster and lighter for the network.

1) localStorage vs sessionStorage


// localStorage: data has NO expiry date - it stays until removed by code or the user
localStorage.setItem("username", "Sonu");

// sessionStorage: data lasts only for the current browser tab
// it is cleared automatically when the tab is closed
sessionStorage.setItem("tempNote", "Reminder for this visit only");

Both objects share the exact same API. The only difference is how long the data survives.

2) Saving and Reading Data: setItem() & getItem()


// Save a value (both key and value are stored as strings)
localStorage.setItem("favColor", "blue");

// Read it back later, even after the browser is closed and reopened
var color = localStorage.getItem("favColor");
console.log(color); // "blue"

// getItem() returns null if the key does not exist
console.log(localStorage.getItem("noSuchKey")); // null

Web Storage only stores strings. To store objects or arrays, convert them with JSON.stringify() before saving and JSON.parse() after reading.

3) Removing Data: removeItem() & clear()


// Remove a single key
localStorage.removeItem("favColor");

// Remove EVERYTHING this page has stored (be careful!)
localStorage.clear();

removeItem(key) deletes one entry, while clear() wipes out every key-value pair stored by your site.

4) Storing Objects and Arrays


var user = { name: "Sonu", loggedIn: true };

// Convert the object to a JSON string before saving
localStorage.setItem("user", JSON.stringify(user));

// Convert it back to an object when reading
var savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "Sonu"

This is the standard trick for saving structured data like settings, cart items, or form drafts.

5) Checking Browser Support


<script>
  if (typeof(Storage) !== "undefined") {
    // Web Storage is supported, safe to use localStorage/sessionStorage
  } else {
    // Fall back to cookies or another method
  }
</script>

Every modern browser supports Web Storage, but this check is a safe habit for older environments.

Live Demo

Type a note below and click Save to store it in localStorage. Reload this page (or come back tomorrow) and click Load - the note is still there, because localStorage never expires on its own.

Best Practices:

  • Use localStorage for data that should persist across visits (preferences, drafts, themes).
  • Use sessionStorage for temporary, per-tab data (a multi-step form, a one-time flag).
  • Never store sensitive data like passwords or tokens in Web Storage - it is accessible to any JavaScript running on the page.
  • Always use JSON.stringify() / JSON.parse() when storing objects or arrays.
  • Web Storage is per-origin: data saved by one domain cannot be read by another.