Svelte组件状态保持问题：Panel折叠状态返回页面丢失

你当前的代码用了组件本地的响应式变量open和openPanel，但SvelteKit在页面导航（比如返回上一页）时，组件会被销毁并重新渲染，本地变量自然会回到初始值false，所以状态无法保留。

下面是两种最常用的修复方案，按需选择：

方案1：用sessionStorage/localStorage持久化状态 #

适合不需要分享状态，只在当前会话或浏览器中保留的场景：

<script lang="ts">
    // 初始化时从sessionStorage读取状态，默认关闭
    let openPanel: boolean = sessionStorage.getItem('panelOpen') === 'true';

    // 状态变化时同步到sessionStorage
    $: if (typeof sessionStorage !== 'undefined') {
        sessionStorage.setItem('panelOpen', openPanel.toString());
    }
</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>

• 用sessionStorage的话，关闭浏览器标签页状态就会清除；如果需要永久保留，换成localStorage即可。
• 加typeof sessionStorage !== 'undefined'是避免服务端渲染时报错，因为服务端没有sessionStorage。

方案2：用URL查询参数同步状态 #

适合需要把面板状态通过链接分享的场景（比如别人打开链接时面板是展开的）：

<script lang="ts">
    import { page } from '$app/stores';
    import { goto } from '$app/navigation';

    let openPanel: boolean = false;

    // 页面加载时读取URL里的状态参数
    $: if ($page.url.searchParams.get('panelOpen') === 'true') {
        openPanel = true;
    }

    // 状态变化时更新URL参数
    $: if (typeof window !== 'undefined') {
        const params = new URLSearchParams($page.url.searchParams);
        params.set('panelOpen', openPanel.toString());
        goto(`?${params}`, { noScroll: true });
    }
</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>

• noScroll: true是避免更新URL时页面滚动到顶部，提升体验。

你原来代码里的$: openPanel = open完全多余，还可能干扰双向绑定，直接绑定openPanel到组件的open属性就行。

内容的提问来源于stack exchange，提问作者Mike Casan Ballester