在初始渲染时将组件的变量设置为 localStorage / 全局变量值

Question

我正在使用 Svelte + SvelteKit。

我想根据用户之前在 localStorage 中保存的值设置组件中变量的

初始值

。我可以使用以下方法让它在初始加载之后加载：

let foo = false;

if (browser) {
  foo = localStorage.collapsed === 'true'
}

这似乎在页面加载后运行，在我的例子中这意味着初始值会闪烁。

我也知道我可以使用

<svelte:head>

在页面渲染之前获取初始

localStorage

值：

<svelte:head>
  <script>
    if (localStorage.foo === 'true') {
      window.foo = true;
    }
  </script>
</svelte:head>

但是我如何根据这个全局变量/在

<head>

中获得的内容来更新组件的值？

对于 CSS，我可以将一个类附加到

documentElement

或

body

，但这对我没有帮助。

回复：

https://svelte.dev/repl/3e4099fc70814541ae837ff7da50926a?version=4.2.7

Answer 1

您可以将整个组件包装在

{#if browser}

中，关闭 SSR 以及其他一些技术。

或者，将数据存储在 cookie 中，这些数据会针对每个请求发送，因此可在服务器上使用。