HTML Web Storage

Previously, canvas was a blank bitmap that JavaScript painted with pixels. This lesson leaves drawing and introduces Web Storage: remembering small key/value strings in the browser with localStorage and sessionStorage. Your HTML page still loads a script; that script calls storage APIs. Scope stays practical — intro save/read and lifetime — not cookies, IndexedDB, or a backend database course.

Why web storage in an HTML course

Beginners want a theme, a name, or a draft note to survive a refresh. Web Storage is the common first tool for that. After canvas’s “JS paints pixels,” this lesson’s split is different: HTML owns the page shell; JS owns remembering strings for that site origin. You only need setItem, getItem, and knowing local vs session lifetimes — enough to use storage safely at intro level without diving into quotas, events, or sync across devices.

Direct answer

1) From JavaScript on your page, call localStorage.setItem("key", "value") to save a string.
2) Read it back with localStorage.getItem("key") (returns null if missing).
3) Prefer localStorage when the value should survive browser restarts until the user or site clears it.
4) Prefer sessionStorage when the value should last only for that tab/session.
5) There is no HTML tag that replaces these APIs — storage is script-driven, like canvas drawing.
6) Store light preferences only; never treat Web Storage as a password vault. Objects need JSON.stringify / JSON.parse because values are strings.

📊 localStorage vs sessionStorage

Topic	localStorage	sessionStorage
Typical lifetime	Until cleared by user/site/code	Until the tab/session ends
Survives browser restart	Usually yes (same origin)	No
Shared across tabs (same origin)	Yes (same storage)	No (per tab/session)
API shape	setItem / getItem / removeItem	Same method names
Beginner fit	Theme, language preference	One-tab wizard draft, temp flags
This course depth	Intro save/read only	Intro save/read only

Tiny localStorage demo

A button click can save a greeting and show it with alert. After reload, getItem still finds the value for that origin — that is the “local” idea.

localStorage setItem and getItem

html

<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

Reading the localStorage calls

localStorage is a browser object available to scripts on the page (same origin rules apply)
setItem("greet", "hi") stores the string under the key greet
getItem("greet") reads that string back (or null if unset)
Showing the value in a <p> proves persistence across refresh without drawing anything (unlike canvas)
Keys and values are strings — numbers/objects need conversion if you store them
Clearing: removeItem("greet") or DevTools Application → Local Storage (optional)

sessionStorage for tab-only data

sessionStorage uses the same method names but a shorter lifetime. Useful for a one-tab draft that should vanish when the tab closes.

sessionStorage note

html

<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

Reading the sessionStorage idea

Same setItem / getItem pattern as localStorage
Value is restored on refresh inside the same tab, but typically gone after the tab/session ends
Do not expect another tab to see the same sessionStorage data
Still strings only; still not for passwords or tokens you must protect
Choose local vs session by lifetime need, not by which name sounds fancier
Next optional lesson: geolocation asks the browser for location — a different JS capability

Choosing what to store

Theme or UI language preference: localStorage
Wizard step flag for this tab only: sessionStorage
Secret passwords / auth tokens you must protect: neither — use proper auth flows (beyond this intro)
Large files or offline databases: not Web Storage intro — look later at other APIs
Server-side user accounts: backend/database — browser storage is per browser, not your whole product DB
Drawing pixels on a surface: that was canvas (previous lesson), not storage

Practice — remember a preference

Paste the localStorage demo; click save; confirm the paragraph shows hi.
Refresh the page; confirm getItem still restores the greeting.
Paste the sessionStorage demo; save a note; refresh in the same tab — note returns.
Close that tab, open the page again; confirm the session note is typically gone.
Try localStorage.setItem("n", 42) then typeof localStorage.getItem("n") — notice it comes back as a string.
Write one sentence: canvas paints pixels; Web Storage saves key/value strings.
Peek ahead: geolocation reads device location with user permission — not storage.

Easy mistakes

Expecting an HTML <storage> tag instead of JavaScript APIs
Storing passwords or secrets in Web Storage as if it were a vault
Forgetting values are strings (objects need JSON encode/decode)
Confusing Web Storage with canvas drawing or with HTTP cookies
Assuming sessionStorage survives forever like localStorage
Assuming another device or another browser profile shares the same storage
Treating this intro as a full offline/database curriculum

Summary

Web Storage is a JavaScript API: localStorage and sessionStorage
setItem / getItem save and read string keys for your origin
local lasts until cleared; session lasts for the tab/session
Good for light preferences — not for secrets
Canvas was pixels; this lesson is remembered strings
Next: HTML geolocation for reading location with permission

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top