Persistence

Keep a preference or draft across reloads with persist(). It returns reactive data you can use in bindings just like other state.

Persist a component’s preferences

Import persistence where needed:

import { createApp } from '@jnreis/briojs';
import { persist } from '@jnreis/briojs/persistence';

createApp().component('preferences-panel', {
  template: `
    <label>
      Theme
      <select b-model="$data.preferences.theme">
        <option>light</option>
        <option>dark</option>
      </select>
    </label>
  `,
  setup() {
    return {
      preferences: persist('preferences', { theme: 'light' }),
    };
  },
}).mount('#preferences');

Values and storage adapters

Value	How to use it
Object or array	Reactive directly; read/write its properties or items.
Primitive	Returned as a signal; use .value.

Storage option	Adapter
Omitted, or { storage: 'local' }	localStorage (default).
{ storage: 'session' }	sessionStorage.
{ storage: adapter }	Your getItem/setItem adapter.

JSON serialization errors and storage errors are surfaced.

Persistence lifetime and cross-tab updates

• Inside component setup, an app plugin, or an explicit reactive scope, disposal removes the save effect and cross-tab listener.
• Outside any scope, a value lives for the life of the page. For example, a module-level const token = persist('token', '') may be shared by several components.
• Cross-tab updates apply to the existing reactive value; array roots are replaced in place. Saving continues afterwards.
• A remote value with a different shape is ignored: array versus object, or a non-object for an object root.

Persistence uses JSON, not encryption. Browser storage is not a secure credential vault or an authoritative server-side data store.