Automatically save and restore form input values using localStorage or sessionStorage.
Basic Usage
Add data-persist to any input to save its value:
HTML
<input type="text" name="draft-title" data-persist="article-title">The value is automatically:
- Restored when the page loads
- Saved on every input change
Storage Scope
By default, values are saved to localStorage (persists across sessions). Use data-persist-scope for session-only storage:
HTML
<!-- Persists across browser sessions --><input data-persist="username"> <!-- Cleared when browser closes --><input data-persist="temp-search" data-persist-scope="session">Form Draft Example
Save an entire form as a draft:
HTML
<form action="/posts" method="post"> <input name="title" data-persist="post-draft-title" placeholder="Title"> <textarea name="body" data-persist="post-draft-body" placeholder="Write your post..."></textarea> <button type="submit">Publish</button> <button type="reset">Clear Draft</button></form>Form Reset: When a form is reset, html★ automatically clears the persisted values for all inputs in that form.
Supported Input Types
| Input Type | What's Saved |
|---|---|
| text, email, tel, url, etc. | value |
| textarea | value |
| checkbox | checked state |
| radio | selected value |
| select | selected value |
Storage Keys
Values are stored with a htmlstar: prefix to avoid conflicts:
HTML
<input data-persist="my-key"><!-- Stored as: localStorage["htmlstar:my-key"] -->JavaScript API
Clear persisted values programmatically:
JAVASCRIPT
<h2>User Preferences Example</h2><code-block language="html"><!-- Theme preference --><select data-persist="theme-preference" onchange="applyTheme(this.value)"> <option value="light">Light</option> <option value="dark">Dark</option> <option value="system">System</option></select> <!-- Sidebar collapsed state --><input type="checkbox" data-persist="sidebar-collapsed" onchange="toggleSidebar(this.checked)">Privacy Consideration: Don't persist sensitive data like passwords or personal information. Use session storage for sensitive drafts that should be cleared when the browser closes.