Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
sessionStorage is similar to localStorage, but the data is cleared when the page session ends. Perfect for temporary data like form progress, wizard states, or tab-specific settings.
Data cleared when tab/window closes
Each tab has its own storage
| Feature | localStorage | sessionStorage |
|---|---|---|
| Persistence | Survives browser restart | Cleared on tab close |
| Scope | Shared across all tabs | Per tab/window |
| Use Case | User preferences, auth tokens | Form state, wizard progress |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionStorage Demo</title>
</head>
<body>
<div class="container">
<h1>⏱️ sessionStorage Demo</h1>
<div class="subtitle">
⚠️ Data persists only for this tab session and clears when you close it
</div>
<span class="status status-active" id="sessionStatus">✅ Session Active</span>
<div class="form-group">
<label for="nameInput">Your Name</label>
<input type="text" id="nameInput" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="emailInput">Your Email</label>
<input type="text" id="emailInput" placeholder="Enter your email">
</div>
<div class="button-group">
<button class="btn-save" onclick="saveData()">💾 Save to Session</button>
<button class="btn-load" onclick="loadData()">📂 Load from Session</button>
<button class="btn-clear" onclick="clearData()">🗑️ Clear Session</button>
</div>
<div class="result-box">
<div class="result-label">Stored Data</div>
<div class="result-value" id="output">No data in this session yet</div>
</div>
<div class="info-card">
<strong>💡 Try this:</strong>
1. Save some data<br>
2. Refresh the page (data persists)<br>
3. Open in a new tab (empty - different session)<br>
4. Close and reopen this tab (data is gone!)
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step Form with sessionStorage</title>
</head>
<body>
<div class="container">
<h1>📝 Multi-Step Form</h1>
<div class="progress-bar">
<div class="progress-fill" id="progressBar" style="width: 33%"></div>
</div>
<!-- Step 1: Personal Info -->
<div class="step active" id="step1">
<div class="step-title">Step 1: Personal Information</div>
<div class="form-group">
<label>Full Name</label>
<input type="text" id="fullName" placeholder="John Doe">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email" placeholder="john@example.com">
</div>
<div class="button-group">
<button class="btn-next" onclick="nextStep(1)">Next →</button>
</div>
</div>
<!-- Step 2: Address -->
<div class="step" id="step2">
<div class="step-title">Step 2: Address</div>
<div class="form-group">
<label>Street Address</label>
<input type="text" id="address" placeholder="123 Main St">
</div>
<div class="form-group">
<label>City</label>
<input type="text" id="city" placeholder="New York">
</div>
<div class="button-group">
<button class="btn-prev" onclick="prevStep(2)">← Back</button>
<button class="btn-next" onclick="nextStep(2)">Next →</button>
</div>
</div>
<!-- Step 3: Review -->
<div class="step" id="step3">
<div class="step-title">Step 3: Review & Submit</div>
<div class="summary" id="summary"></div>
<div class="button-group">
<button class="btn-prev" onclick="prevStep(3)">← Back</button>
<button class="btn-next" onclick="submitForm()">Submit ✓</button>
</div>
</div>
</div>
</body>
</html>Loading preview...
sessionStorage.setItem(key, value)Store data for this session
sessionStorage.getItem(key)Retrieve session data
sessionStorage.removeItem(key)Delete specific item
sessionStorage.clear()Clear all session data