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

【问题标题】：How to persist UI component state data in Sapper?如何在 Sapper 中持久化 UI 组件状态数据？
【发布时间】：2021-04-20 17:27:37
【问题描述】：

在 Sapper 应用中，我希望能够保持某些 UI 组件的状态，以便在用户返回使用这些组件的页面时导航应用而不会丢失状态。

在仅 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。有一些方法可以阻止某些部分代码在服务器上运行（使用组件中的onMount 生命周期函数，或检查process.browser === true），但在这里似乎不可能。

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

【问题讨论】：

标签： javascript svelte sapper

【解决方案1】：

为 SSR 提供一个虚拟存储。

始终可以使用typeof localStorage !== 'undefined' 之类的方式进行特征检测。

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

有关示例，请参阅 this answer。

【讨论】：