Как сохранить состояние компонента с помощью Svelte?

Question

Я пытаюсь сохранить состояние «открыто/закрыто» компонента «Панель». Я использую компонент Accordion из библиотеки SMUI.

Однако при возвращении на страницу с компонентом он продолжает получать значение по умолчанию.

В настоящее время я использую реактивные значения, предложенные SvelteKit . Где я ошибаюсь?

      <script lang="ts">
    let open: boolean = false;
    $: openPanel = open;
</script>

<Panel bind:open={openPanel}>
    <Header>
        <IconButton slot="icon" toggle pressed={openPanel}>
            <Icon class="material-icons" on>expand_less</Icon>
            <Icon class="material-icons">expand_more</Icon>
        </IconButton>
    </Header>
    ...
</Panel>

Answer 1

По умолчанию состояние нигде не сохраняется, поэтому, если вы не позаботитесь об этом самостоятельно, оно исчезнет.

Я обычно использую магазин для упаковкиsessionStorageдля менее важного/постоянного состояния, такого как, например, открытое/закрытое состояние этого вопроса. SvelteKit также имеет функцию «снимков» , которая позволяет сохранять состояние для записи истории, хотя это восстанавливает состояние только при обратной навигации или перезагрузке браузера.

Для долговременной конфигурации, например темы страницы, я бы использовалlocalStorageили сохраните его в БД на сервере.