Web Storage in HTML
?? Web Storage in HTML (HTML5)
Web Storage is a feature of HTML5 that allows websites to store data in the browser locally, without using cookies. It provides two main types of storage:
? 1. localStorage
Stores data with no expiration time.
Data persists even after the browser is closed.
Example:
<script>// Set itemlocalStorage.setItem("username", "John");// Get itemlet user = localStorage.getItem("username");console.log(user); // "John"// Remove itemlocalStorage.removeItem("username");// Clear alllocalStorage.clear();</script>? 2. sessionStorage
Stores data for one session only.
Data is deleted when the browser or tab is closed.
Example:
<script>// Set itemsessionStorage.setItem("cart", "3 items");// Get itemlet cart = sessionStorage.getItem("cart");console.log(cart); // "3 items"// Remove itemsessionStorage.removeItem("cart");// Clear allsessionStorage.clear();</script>? Key Differences
| Feature | localStorage | sessionStorage |
|---|---|---|
| Lifetime | Persistent | Until tab closes |
| Scope | All tabs/windows | Current tab only |
| Storage limit | ~5–10MB (browser-dependent) | ~5MB |
| Use case | User preferences, tokens | Temporary data |
?? Security Note
Web Storage is not secure for storing sensitive data like passwords or access tokens. Always encrypt or use server-side sessions for secure data.
? Check Support
if (typeof(Storage) !== "undefined") { // Web Storage is supported} else { // Sorry! No Web Storage support..}Would you like a working demo app using localStorage (e.g., a to-do list or dark mode switch)?
