Auto LocalStorage (`data-ls-key`)

FastPluggy's scripts.js automatically persists and restores the value of any form element that carries a data-ls-key attribute — no JavaScript required from the plugin author.

How it works

On page load, initAutoLocalStorage scans for every [data-ls-key] element. For each one it:

Reads the saved value from localStorage under that key.
Restores it to the element (value for text/number/select, checked for checkboxes).
Attaches a listener (input or change) that saves the new value whenever the user changes the element.

Values are stored as JSON, so booleans round-trip correctly for checkboxes.

Supported elements

Element type	Saved property	Restored property
`<input type="text">` / `number` / `range` / …	`el.value`	`el.value`
`<input type="checkbox">`	`el.checked` (boolean)	`el.checked`
`<select>`	`el.value`	`el.value`
`<textarea>`	`el.value`	`el.value`

Usage

Add data-ls-key with a unique key to any form element:

<!-- text input — persists the filter query -->
<input type="text" data-ls-key="my_plugin_filter" placeholder="Search…">

<!-- checkbox — persists the toggle state -->
<input type="checkbox" data-ls-key="my_plugin_show_advanced">

<!-- select — persists the chosen option -->
<select data-ls-key="my_plugin_page_size">
  <option value="10">10</option>
  <option value="25">25</option>
  <option value="50">50</option>
</select>

<!-- number / range -->
<input type="number" value="5" data-ls-key="my_plugin_interval">

No additional JavaScript is needed. The attribute alone is enough.

Key naming convention

Use a prefix that is unique to your plugin to avoid collisions:

{plugin_name}_{setting_name}

Examples from the built-in plugins:

Key	Element	Plugin
`tw_auto_refresh_enabled`	checkbox	`tasks_worker`
`tw_auto_refresh_interval`	number input	`tasks_worker`
`tw_filter_name`	text input	`tasks_worker`
`task_form_filter_persist`	checkbox	`tasks_worker`

Reserved keys

The following localStorage keys are used by the FastPluggy core UI and must not be reused:

Key	Description
`fp-theme`	Current UI theme (`"dark"` / `"light"`)
`fp-sidebar`	Sidebar collapse state (`"collapsed"` / `"expanded"`)
`fp-layout`	Content width (`"container-xl"` / `"container-fluid"`)

In a Jinja2 template the attribute works exactly the same way:

<input type="text"
       name="query"
       value="{{ query or '' }}"
       data-ls-key="{{ module_name }}_query"
       class="form-control">

The server-rendered value is overridden by the saved localStorage value on the client side, so the last user input takes precedence on subsequent page visits.

Auto LocalStorage (data-ls-key)