Streamlining the persistence of control values and states as a user preference
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
I chose to start this discussion here as I believe this feature would be quite complimentary to a number of proposals here (both active and graduated). It's very common to provide some convenience to users by remembering and persisting certain choices they make on your site. Some examples might be:
- Dark/light theme
- Search results sort order
- Product list filters
- The last tab you were on (in a tab group)
- "Don't show this in the future" checkboxes
Sometimes, you might not implement persistence of these things because the cost (e.g. implementing/maintaining the functionality) is not worth something as simple as a user preference. I think it would be great to build on this pattern to simplify it by adding an HTML attribute to controls whose state you might want to persist as a preference for the user. To use the first example above, along with the <menulist> element:
<menulist>
<fieldset checkable=single>
<legend>Theme selection</legend>
<!-- just to demonstrate the idea, I've named the attribute "persistencekey" -->
<menuitem id="themeLight" persistencekey="theme-light-mode">Light</menuitem>
<menuitem id="themeDark" persistencekey="theme-dark-mode">Dark</menuitem>
<menuitem id="themeAuto" checked persistencekey="theme-auto-mode">Auto</menuitem>
</fieldset>
</menulist>
Then, with CSS:
:root:has(#themeLight:checked) {
/* light theme variables */
}
:root:has(#themeDark:checked) {
/* dark theme variables */
}
/* ... etc */
When the user changes the state of a control that has a persistencekey attribute, that state is stored using the same mechanism as localStorage, and the state is restored (overriding the markup state) on the next reload. As well as simplifying the approach to storing some preferences, this would actually allow purely visual preferences to be saved and restored without the use of JavaScript or cookies, something that's not currently possible.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no repository files, tests, or entry points. Start by reviewing the proposed persistencekey behavior and its HTML/CSS examples; done would require an agreed, implementable specification for restoring control state and defining its storage behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100