HTML Web Storage

HTML Web Storage API

The HTML Web Storage API allows web applications to store data locally in the user’s browser.

It is more secure and efficient than cookies and can store much larger amounts of data.

What Is HTML Web Storage?

Before HTML5, applications relied on cookies to store data. Cookies are sent with every server request and have limited storage.

Web Storage stores data locally in the browser, is not sent to the server, and does not affect page performance.

• Minimum storage size is about 5MB per origin
• Data is never automatically transferred to the server
• Storage is scoped per origin (domain + protocol)

Web Storage Objects

The Web Storage API provides two storage objects:

• localStorage – stores data with no expiration date
• sessionStorage – stores data for one browser session

Check Web Storage Support

Before using Web Storage, you should verify browser support.

 const x = document.getElementById("result");  if (typeof(Storage) !== "undefined") {   x.innerHTML = "Your browser supports Web Storage!"; } else {   x.innerHTML = "Sorry, no Web Storage support!"; } 

The localStorage Object

The localStorage object stores data permanently until it is explicitly removed.

Data remains available even after the browser is closed.

Store and Retrieve Data

 localStorage.setItem("lastname", "Smith"); localStorage.setItem("bgcolor", "yellow");  const name = localStorage.getItem("lastname"); const color = localStorage.getItem("bgcolor"); 

All values are stored as strings. Convert them when working with numbers or objects.

Remove Stored Data

 localStorage.removeItem("lastname"); 

Counting Clicks with localStorage

This example shows how to persist a click counter across page reloads.

 function clickCounter() {   const x = document.getElementById("result");    if (typeof(Storage) !== "undefined") {     if (localStorage.clickcount) {       localStorage.clickcount = Number(localStorage.clickcount) + 1;     } else {       localStorage.clickcount = 1;     }     x.innerHTML =       "You have clicked the button " + localStorage.clickcount + " time(s)!";   } else {     x.innerHTML = "Sorry, no Web Storage support!";   } } 

The sessionStorage Object

The sessionStorage object works like localStorage, but data is cleared when the browser tab is closed.

It is useful for temporary data that should not persist between sessions.

Counting Clicks with sessionStorage

This example tracks clicks only during the current session.

 function clickCounter() {   const x = document.getElementById("result");    if (typeof(Storage) !== "undefined") {     if (sessionStorage.clickcount) {       sessionStorage.clickcount =         Number(sessionStorage.clickcount) + 1;     } else {       sessionStorage.clickcount = 1;     }     x.innerHTML =       "You have clicked the button " +       sessionStorage.clickcount +       " time(s) in this session!";   } else {     x.innerHTML = "Sorry, no Web Storage support!";   } } 

When to Use Web Storage

• Saving user preferences
• Storing UI state
• Caching small amounts of data
• Tracking session-based interactions

The Web Storage API provides a simple and efficient way to store client-side data without relying on cookies.