如何在 Sapper 中持久化 UI 组件状态数据？

Question

在 Sapper 应用程序中，我希望能够保留某些 UI 组件的状态，这样当用户 returns 访问使用这些组件的页面时，我可以在不丢失状态的情况下导航应用程序.

在仅限 Svelte 的应用程序中，这通常是通过使用 sessionStorage 或 localStorage API 的自定义商店完成的。一个很好的例子可以在 R. Mark Volkmann 的书 Svelte and Sapper in Action, §6.24:

中找到

store-util.js

import {writable} from 'svelte/store';

function persist(key, value) {
  sessionStorage.setItem(key, JSON.stringify(value));
}

export function writableSession(key, initialValue) {
  const sessionValue = JSON.parse(sessionStorage.getItem(key));
  if (!sessionValue) persist(key, initialValue);

  const store = writable(sessionValue || initialValue);
  store.subscribe(value => persist(key, value));
  return store;
}

不幸的是，以这种方式使用商店会在 Sapper 中立即中断，因为脚本运行首先在服务器上，其中 sessionStorage 未定义。有一些方法可以防止某些部分代码在服务器上运行ning（使用组件中的 onMount 生命周期函数，或检查 process.browser === true），但这在这里似乎不可能.

在本地保留某些状态看起来是一个非常常见的用例，所以我想知道在 Sapper 应用程序中执行此操作的正确方法是什么（考虑到我什至没有发现错误的方法）。

Answer 1

为 SSR 提供虚拟存储。

总是可以用 typeof localStorage !== 'undefined'.

之类的东西进行特征检测

您的组件代码将在浏览器中重新运行，即使页面是 SSR。这意味着，如果它被提供给不同的商店，则仅浏览器的值将接管并更新现有状态（从服务器继承）。

请参阅 this answer 示例。

如何在 Sapper 中持久化 UI 组件状态数据？

How to persist UI component state data in Sapper?

javascript

svelte

sapper