Last updated
Common SessionStorage Use Cases
- Multi-step form progress — preserve data between steps without committing to localStorage
- Navigation history — track pages visited within a session for back-navigation
- Temporary authentication tokens — store short-lived tokens that should not persist
- Search and filter state — remember filters applied during a browsing session
- Shopping cart draft — hold cart contents before the user is logged in
- Tab-specific state — state that should be independent per browser tab
Storage Size Reference
- Typical browser limit: 5–10 MB per origin
- The manager shows the size of each entry in bytes
- Total size is shown at the bottom of the table
- Exceeding the limit throws a
QuotaExceededError— monitor size to avoid this
Debugging Tips
- Use the manager to inspect sessionStorage state when a bug only occurs mid-session
- Export the state snapshot when you find a bug to reproduce it reliably later
- Add entries manually to test edge cases without navigating through the full flow
- Clear individual entries to test how the app handles missing state gracefully
Examples
Example 1: Viewing Current SessionStorage
The manager displays all entries in a table like this:
Key Value (truncated) Size
--------------------------------------------------------------
currentStep 3 1 B
formData {"name":"Alice","email":"... 142 B
navigationHistory ["/home","/products","/cart"] 38 B
searchFilters {"category":"electronics",... 89 B
tempAuthToken eyJhbGciOiJIUzI1NiJ9... 256 B
Click any row to expand the full value and edit it.
Example 2: Multi-Step Form Progress
A common use case — storing form progress across steps:
// Step 1: Save progress to sessionStorage
sessionStorage.setItem('checkoutStep', '2');
sessionStorage.setItem('checkoutData', JSON.stringify({
step1: {
firstName: 'Alice',
lastName: 'Smith',
email: 'alice@example.com'
},
step2: {
address: '123 Main St',
city: 'Springfield',
zip: '12345'
}
}));
// Step 2: Read progress back
const step = sessionStorage.getItem('checkoutStep');
const data = JSON.parse(sessionStorage.getItem('checkoutData'));
console.log(step); // "2"
console.log(data.step1.email); // "alice@example.com"
The manager displays the JSON value formatted and readable:
{
"step1": {
"firstName": "Alice",
"lastName": "Smith",
"email": "alice@example.com"
},
"step2": {
"address": "123 Main St",
"city": "Springfield",
"zip": "12345"
}
}
Example 3: Adding a New Entry
Simulate a specific application state by adding entries manually:
Key: userRole
Value: admin
Key: featureFlags
Value: {"darkMode":true,"betaFeatures":true,"newDashboard":false}
Key: lastVisitedPage
Value: /settings/security
This is useful for testing features that depend on specific sessionStorage values without navigating through the full application flow.