Integrating Mithril localStorage backup with route state restoration and integrity verification

Answer

The fastest, non‑blocking way to verify a backup is to compute an HMAC‑SHA256 with the Web Crypto API, compare it in constant time, and then restore the route before the component tree mounts. This avoids a flash of stale UI and stays well within the ~5 MB localStorage quota as long as the stored state remains small.

1. Compute and verify the hash without blocking the initial render

1. On startup, read the stored item (e.g., localStorage.getItem('mithril-route-backup')). It should contain a JSON string with two fields: payload (the route‑state JSON) and hmac (hex‑encoded HMAC‑SHA256).
2. Use crypto.subtle.importKey to bring the secret key (embedded in the build as a raw buffer) into a CryptoKey object.
3. Call crypto.subtle.sign('HMAC', key, textEncoder.encode(payload)). This returns a Promise that resolves with the signature buffer.
4. When the Promise resolves, convert the buffer to a hex string and compare it to the stored hmac using a constant‑time function (e.g., sjcl.misc.cca or a simple loop that accumulates XOR differences).
5. If the comparison succeeds, parse payload with JSON.parse and feed the resulting object to Mithril’s route state (via onmatch or oninit of the root component). If it fails, log a warning, discard the backup, and start with the default state.
6. All of the above runs asynchronously; the initial render proceeds with the default state, and the UI updates once the verification promise resolves, preventing a flash of stale data.

2. Restore the route before the component tree re‑hydrates

1. Extract the route path and parameters from the verified payload (e.g., {path: '/user/123', params: {id: '123'}}).
2. Before mounting the root component with m.mount, call m.route.set(route.path, route.params, {replace: true}). This updates the URL and Mithril’s internal route state without triggering a render because the view has not yet been attached to the DOM.
3. Then mount the application (m.mount(document.getElementById('app'), rootComponent)). The root component’s onmatch (or oninit) will receive the restored state directly, so the first render reflects the correct UI.

3. Handling large backup objects

If the route‑state JSON approaches several megabytes, consider:

• Splitting the state into logical chunks (e.g., UI preferences vs. data cache) and storing each under a distinct key; load only the chunks needed for the current route.
• Using lazy loading: store a small identifier in localStorage and fetch the full payload from IndexedDB or a server endpoint when required.
• Pruning old entries or applying a version‑based retention policy to stay safely under the 5 MB origin limit.

For most applications, keeping only the essential UI route state (navigation, filters, pagination) keeps the backup well under the limit, making splitting unnecessary.