JavaScript Web Storage
Web storage keeps a small note in the browser for this site. localStorage is still there after you close the browser. This page saves { guest: "lida", drink: "tea" } and the line reads saved / lida / tea.
Not the pattern page
That page ended on true / Order: mint. It searched a string and threw nothing. Storage also throws nothing when a key is missing: getItem returns null. Cookies are a later page. Storage is not attached to each request the browser sends.
A value is always a string
setItem writes under a key. getItem reads it back. If you pass a number, it is stored as text.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
The logs are tea, then null. size was never written, so there is no value and no error. setItem("count", 2) stores the characters 2, not a number. After a reload, getItem("drink") is still tea.
An object has to travel as JSON
Give setItem a plain object and it stores the text [object Object]. JSON.stringify makes text you can save. JSON.parse builds the object again. JSON.parse(null) throws, so read the item first and skip the parse when it is null.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
The log is lida / tea. The key w3-order holds text, and back is an object again. Every page on this same origin can read that key.
The tab, or the browser
sessionStorage has the same three methods. It lives until that tab closes. localStorage is still there when the browser opens again. removeItem deletes one key. clear deletes every key for this origin, so do not call it just to tidy one order.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
The logs are mint, then null. Open a second tab and that sessionStorage key is not there. The localStorage key w3-order is there in both tabs. Closing the tab drops only the session note.
One origin, every page
The box is shared by the scheme, the host, and the port. It is not a box for one file. A key you set on the home page is visible on the order page of the same site. Another site cannot read it.
The line
The page writes the order, reads it back, and shows the guest and the drink.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
The line reads saved / lida / tea. Reload the sample and the same words come back from localStorage. true / Order: mint was the pattern page.
At the counter
- setItem drink to tea. getItem returns tea.
- getItem of size returns null.
- Save the order with JSON.stringify. After parse, the log is lida / tea.
- Put mint in sessionStorage, then removeItem. getItem returns null.
- Read the page. The line is saved / lida / tea.
Misses
Storage remembers strings, not live objects. clear is the whole origin, not one key.
- Passing an object to
setItemand later reading[object Object] - Calling
JSON.parseonnull - Expecting
sessionStorageto survive a new tab - Calling
clearand wiping every key on the site - Reading the line as true / Order: mint
Keep this
setItemandgetItemstore and read strings- A missing key is
null - Objects go in with
JSON.stringifyand come out withJSON.parse localStoragesurvives a restart;sessionStorageends with the tab- The page line is saved / lida / tea
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 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