openui / openui/open-ui

Streamlining the persistence of control values and states as a user preference

Open
#1,448 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.