Lifecycle Basics: Save And Load

This guide shows the file-style lifecycle helpers *save.file and *load.file.

Note Editor

<serc-rod data='{"title":"Draft","body":"Write here..."}'>
    <label>
        Title:
        <input type="text" *input="title" *lazy>
    </label>

    <label>
        Body:
        <textarea *input="body" *lazy></textarea>
    </label>

    <h2 *print="title"></h2>
    <p *print="body"></p>

    <button type="button" *save.file>Save JSON</button>
    <button type="button" *load.file>Load JSON</button>
</serc-rod>

*save.file serializes host data and triggers a download. *load.file reads JSON back into host data. For browser-local persistence without a file picker, use *save.store="'key'" and *load.store="'key'".

Normal *input keeps its owner stable while allowing targeted inherited-child updates, then commits on change. Input-level *lazy defers those child updates too.

Persistent Store Pattern

Use *save.store and *load.store when the JSON should stay in the browser without showing a file picker.

<serc-rod data='{"title":"","body":""}'>
    <input *input="title" *lazy>
    <textarea *input="body" *lazy></textarea>

    <button type="button" *save.store="'note-editor'">Save browser copy</button>
    <button type="button" *load.store="'note-editor'">Load browser copy</button>
</serc-rod>

The store form is Sercrod-managed browser-local JSON storage. It uses IndexedDB by default and follows the same *keys and *response rules as file loading. Existing *into destinations remain compatible.

See Lifecycle.