How to Use HTML5 LocalStorage and SessionStorage? (With Examples)
localStorage is persistent storage, and sessionStorage is limited to the current tab; both are accessed by string key-value pairs, and need to use JSON.stringify() and JSON.parse() to process objects. They are suitable for non-sensitive data such as user preferences, and are prohibited for confidential information such as passwords.
HTML5 LocalStorage and SessionStorage let you store data directly in the browser — no server needed. They're simple, built-in, and work well for saving user preferences, form drafts, or temporary state. The key difference: localStorage persists across browser sessions (even after closing the tab or restarting the browser), while sessionStorage only lasts as long as the current tab or window is open.
How to save and retrieve data
Both APIs use string-only key-value pairs. You must convert objects or numbers to strings (usually with JSON.stringify() ) before storing them.
- To save: use
setItem(key, value) - To read: use
getItem(key) - To remove one item: use
removeItem(key) - To clear everything: use
clear()
Example with localStorage:
// Save a user preference
localStorage.setItem('theme', 'dark');
//Save an object
const user = { name: 'Alex', lastLogin: new Date() };
localStorage.setItem('user', JSON.stringify(user));
//Retrieve and parse
const savedTheme = localStorage.getItem('theme'); // 'dark'
const savedUser = JSON.parse(localStorage.getItem('user')); // { name: 'Alex', ... }
How to use sessionStorage the same way
The syntax is identical — just replace localStorage with sessionStorage . Data stays only while the tab is open.
// Save a draft while filling a form
sessionStorage.setItem('form-draft', document.getElementById('message').value);
// On page load, restore it if present
const draft = sessionStorage.getItem('form-draft');
if (draft) {
document.getElementById('message').value = draft;
}
This is useful for multi-step forms, shopping cart previews, or avoiding accidental data loss during navigation — but won't survive tab refreshes or closures unless you explicitly re-save.
Important things to keep in mind
- Storage limits are usually ~5–10 MB per origin — enough for most client-side needs, not for large files
- Data is domain-specific:
https://site.comcan't readhttps://other.com's storage - No expiration — localStorage never auto-deletes; you must manage cleanup yourself
- Not secure for sensitive data: values are readable via JavaScript and dev tools
- Always wrap
JSON.parse()in a try/catch — corrupted or missing values can break your code
When to pick which one
- Use localStorage for settings that should stick: dark mode, language, dashboard layout
- Use sessionStorage for short-lived, tab-specific data: login tokens (if not too sensitive), temporary filters, in-progress edits
- Avoid both for passwords, API keys, or PII — use secure HTTP-only cookies or backend sessions instead
Basically, it's not complex — but easy to misuse if you ignore scope, security, or data type handling.
The above is the detailed content of How to Use HTML5 LocalStorage and SessionStorage? (With Examples). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20518
7
13631
4
How to use the template tag for dynamic content in HTML5? (Cloning nodes)
Mar 05, 2026 am 02:15 AM
The template tag itself does not render and must be manually cloned and inserted. Template is a lazy container of HTML5. The browser will parse it but completely skip rendering and script execution. If you write Hello directly, nothing will appear on the page - this is not a bug, it is the design. To make it "alive", you must use JavaScript to extract the content, clone it, and then hang it on the DOM. A common mistake is to directly obtain document.querySelector('template').content and then try to appendChild. The result is an error or no response: because the content is a Docu
How to make a phone number clickable in HTML5? (Tel link)
Mar 05, 2026 am 02:29 AM
The correct way to write it is href="tel: 8613812345678". All non-numeric characters need to be cleared (only and numbers are retained). Mainland China numbers must be prefixed with 86. Extension numbers use;ext= format, and target="_blank" is disabled.
How to disable autocomplete on input fields in HTML5? (Form attributes)
Mar 05, 2026 am 02:31 AM
Autocomplete="off" sometimes does not take effect because modern browsers (such as Chrome ≥ 80) actively ignore it to ensure the password manager experience; to be truly effective, it needs to be combined with strategies such as semantic values (such as new-password), avoiding sensitive names, and dynamically generated attributes.
How to create a progress bar for file uploads in HTML5? (Progress tag)
Mar 06, 2026 am 02:22 AM
Why can't the tag directly display the upload progress? It is a read-only visual component. It does not listen to network requests and is not automatically bound to the upload process of XMLHttpRequest or fetch. If you put it in and don't update the value manually, it will always stop at 0%. What really drives it is the event monitoring in the upload logic you write yourself. A common mistake is to only monitor onload (upload completed) but miss upload.onprogress. XMLHttpRequest (not fetch) must be used to obtain real-time upload progress, because fetch does not expose the max attribute of the event in the upload phase and must be set to the file size (file.size
How to create a tooltip using only HTML5? (Title attribute)
Mar 06, 2026 am 12:23 AM
The title attribute is not a tooltip component, but an accessibility prompt mechanism implemented by the browser. The behavior, style, and interaction are uncontrollable and are only suitable for simple scenarios such as pure information supplement.
How to center an image vertically in HTML5? (Layout techniques)
Mar 07, 2026 am 02:05 AM
Flexbox is the most stable for centered images. The key is to set display:flex and align-items:center in the parent container and specify the height; using place-items:center for Grid is more concise; absolute positioning requires top:50% with transform:translateY(-50%); vertical-align is invalid for block-level centering.
How to insert a copyright symbol in HTML5? (Character entities)
Mar 05, 2026 am 02:57 AM
© and © have the same effect. The former is a named entity and is easy to read, while the latter is a decimal digital entity and has more stable compatibility. It is necessary to avoid the problems of CSS hiding, JS unescapement and missing semantics.
How to create a simple offline web app with HTML5? (Application Cache)
Mar 06, 2026 am 02:16 AM
ApplicationCache has been completely abandoned and will be removed from Chrome 61, Firefox 72, and Safari 11.1. ServiceWorker must be used instead; the latter requires HTTPS, manual registration and cache control, and the path, scope, and life cycle must match exactly.
