时间戳

首页 > 解决方案 > 如何在 Sapper 中持久化 UI 组件状态数据？

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

问题描述

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

在仅 Svelte 的应用程序中，这通常通过使用sessionStorage或localStorageAPI 的自定义商店来完成。一个很好的例子可以在 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 应用程序中正确的方法是什么（考虑到我什至没有找到错误的方法）。

标签： javascriptsveltesapper

解决方案

为 SSR 提供​​一个虚拟存储。

总是可以使用类似的东西进行特征检测typeof localStorage !== 'undefined'。

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

有关示例，请参见此答案。

推荐阅读