HTML Web Storage API Tutorial for Beginners – Simple Explanation

Web Storage lets websites save data in your browser. Unlike old cookies, it is faster, safer, and can store much more data (at least 5MB). And most importantly, the data is never sent to the server automatically.

Tip: Think of Web Storage as a small notepad inside your browser. You can write things down and read them later. The data stays on your computer, not on the website’s server.

Types of Web Storage

There are two types of Web Storage:

localStorage – Saves data forever. It is still there when you close the browser and come back next week.
sessionStorage – Saves data only for the current tab. When you close the tab, the data is gone.

Browser Support

Web Storage is supported in all modern browsers:

Feature	Chrome	Edge	Firefox	Safari	Opera
localStorage	4.0	8.0	3.5	4.0	11.5
sessionStorage	4.0	8.0	3.5	4.0	11.5

Check if Web Storage is Supported

Before using Web Storage, always check if the browser supports it:

The localStorage Object

localStorage saves data permanently. Close your browser, restart your computer, come back next week. The data is still there.

Here is an example that saves your name and retrieves it after reloading the page:

<!DOCTYPE html>
<html>
<body>

<h3>localStorage Demo</h3>

<input type="text" id="demoUserName" placeholder="Enter your name">
<button onclick="demoSaveName()">Save Name</button>
<button onclick="demoGetName()">Get Name</button>
<button onclick="demoRemoveName()">Remove Name</button>
<p id="demoNameResult"></p>

function demoRemoveName() {
  localStorage.removeItem("savedName");
  document.getElementById("demoNameResult").innerHTML = "Name removed from storage.";
}
</script>

<p>Try saving a name, closing this tab, and coming back. The name will still be there when you click “Get Name”.</p>

</body>
</html>

Try it: Save a name, close this page, open it again, and click “Get Name”. The name is still there because localStorage never expires.

Counting Clicks with localStorage

This example counts how many times you have clicked a button. The count never resets, even if you close the browser.

<!DOCTYPE html>
<html>
<body>

<h3>localStorage Click Counter</h3>

<p>This count will stay even after you close your browser.</p>

<button onclick="demoCountClick()">Click Me</button>
<p id="demoClickResult"></p>
<button onclick="demoResetCount()">Reset Count</button>

function demoResetCount() {
  localStorage.removeItem("clickCount");
  document.getElementById("demoClickResult").innerHTML = "Count has been reset to 0.";
}

// Show current count when page loads
if (localStorage.clickCount) {
  document.getElementById("demoClickResult").innerHTML = "You have clicked " + localStorage.clickCount + " times.";
}
</script>

</body>
</html>

The sessionStorage Object

sessionStorage is different from localStorage. It only saves data for the current tab. When you close the tab, the data is gone forever.

This example is the same as above, but uses sessionStorage. The count will reset when you close the tab:

<!DOCTYPE html>
<html>
<body>

<h3>sessionStorage Click Counter</h3>

<p>This count will reset when you close this tab.</p>

<button onclick="demoCountSessionClick()">Click Me</button>
<p id="demoSessionResult"></p>
<button onclick="demoResetSessionCount()">Reset Count</button>

function demoResetSessionCount() {
  sessionStorage.removeItem("clickCount");
  document.getElementById("demoSessionResult").innerHTML = "Count has been reset to 0.";
}

// Show current count when page loads
if (sessionStorage.clickCount) {
  document.getElementById("demoSessionResult").innerHTML = "You have clicked " + sessionStorage.clickCount + " times in this session.";
}
</script>

<p>Close this tab and open the page again. The count resets to 0.</p>

</body>
</html>

Try clicking the button a few times, then close this tab and reopen the page. The count is back to 0 because sessionStorage only lasts for one session.

Useful localStorage Methods

Here are the main methods you need to know:

Method	Description
`localStorage.setItem("key", "value")`	Saves a key/value pair (both must be strings)
`localStorage.getItem("key")`	Retrieves the value for a given key
`localStorage.removeItem("key")`	Deletes a specific key/value pair
`localStorage.clear()`	Deletes ALL saved data for this website
`localStorage.key(index)`	Returns the key name at a specific position
`localStorage.length`	Returns the number of saved items

Saving and Retrieving Numbers and Objects

Web Storage only stores strings. If you want to save a number, you need to convert it. If you want to save an object (like a list or a person’s details), you need to use JSON.stringify() and JSON.parse().

Real-World Uses for Web Storage

Remember user preferences – Dark mode setting, font size, language choice
Save shopping cart items – Keep items in cart even if user closes the browser
Game progress – Save high scores or current level
Form drafts – Save what the user typed so they do not lose it if they refresh
Theme settings – Remember if the user switched to dark mode on ModafVibe or other sites

Quick Summary

localStorage saves data forever (until you delete it).
sessionStorage saves data only for one tab session.
Use setItem() to save data, getItem() to retrieve it.
Use removeItem() to delete one item, clear() to delete everything.
Data is stored as strings. Convert numbers and objects when saving/retrieving.
Always check if the browser supports Web Storage with typeof(Storage) !== "undefined".

What Just Happened? Let Me Explain

Web Storage is much better than old cookies. Cookies are sent to the server with every request. Web Storage stays in your browser.
Each website can only see its own storage. ModafVibe cannot see data saved by Google, and Google cannot see data saved by ModafVibe.
You can store up to 5-10MB of data. That is much more than cookies (4KB).
If you want to save a user’s preferences forever, use localStorage. If you only need data while they are on the page (like a shopping cart that clears when they leave), use sessionStorage.
The data is saved as key-value pairs. Think of it like a dictionary: you look up a value by its key.

Tip: Open your browser’s Developer Tools (F12) and go to Application > Local Storage. You can see all the data saved by this website. You can also delete it manually from there.

Web Storage API Reference

Method / Property	Description
`localStorage.setItem(key, value)`	Saves a key/value pair permanently
`localStorage.getItem(key)`	Retrieves a value by its key
`localStorage.removeItem(key)`	Deletes a specific key/value pair
`localStorage.clear()`	Deletes all data for this website
`localStorage.key(index)`	Returns the key name at a given position
`localStorage.length`	Returns how many items are stored
`sessionStorage` methods	Same as localStorage, but data expires when tab closes
`JSON.stringify()`	Converts an object to a string for storage
`JSON.parse()`	Converts a stored string back to an object