如何保持苗条的商店

Question

是否有任何直接选项可以保留临时存储数据，以便即使刷新页面也可以使用数据。

我不使用本地存储，因为我希望这些值是反应性的。

Answer 1

对于 Svelte Kit，我遇到了 SSR 问题。这是我基于Svelte Kit FAQ、Matyanson 的答案和Adnan Y 的答案的解决方案。

作为奖励，如果发生localStorage更改（例如在不同的选项卡中），此解决方案还会更新可写内容。所以这个解决方案可以跨选项卡工作。查看窗口：存储事件

将其放入打字稿文件中，例如$lib/store.ts：

import { browser } from '$app/env';
import type { Writable } from 'svelte/store';
import { writable, get } from 'svelte/store'

const storage = <T>(key: string, initValue: T): Writable<T> => {
    const store = writable(initValue);
    if (!browser) return store;

    const storedValueStr = localStorage.getItem(key);
    if (storedValueStr != null) store.set(JSON.parse(storedValueStr));

    store.subscribe((val) => {
        if ([null, undefined].includes(val)) {
            localStorage.removeItem(key)
        } else {
            localStorage.setItem(key, JSON.stringify(val))
        }
    })

    window.addEventListener('storage', () => {
        const storedValueStr = localStorage.getItem(key);
        if (storedValueStr == null) return;

        const localValue: T = JSON.parse(storedValueStr)
        if (localValue !== get(store)) store.set(localValue);
    });

    return store;
}

export default storage

可以这样使用：

import storage from '$lib/store'

interface Auth {
    jwt: string
}

export const auth = storage<Auth>("auth", { jwt: "" })

Answer 2

来自https://github.com/higsch/higsch.me/blob/master/content/post/2019-06-21-svelte-local-storage.md by Matthias Stahl：

假设我们有一个名为count.

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// App.svelte
import { count } from 'store.js';

为了使存储持久化，只需将函数包含useLocalStorage到store对象中即可。

// store.js
import { writable } from 'svelte/store';

const createWritableStore = (key, startValue) => {
  const { subscribe, set } = writable(startValue);
  
  return {
    subscribe,
    set,
    useLocalStorage: () => {
      const json = localStorage.getItem(key);
      if (json) {
        set(JSON.parse(json));
      }
      
      subscribe(current => {
        localStorage.setItem(key, JSON.stringify(current));
      });
    }
  };
}

export const count = createWritableStore('count', 0);

// App.svelte
import { count } from 'store.js';

count.useLocalStorage();

然后，在您App.svelte刚刚调用该useLocalStorage函数以启用持久状态。

这在Routeify 中对我来说非常有效。对于工兵，JHeth建议“只是将count.useLocalStorage()中onMount或if (process.browser)在组件上使用的商店。”

Answer 3

您可以手动创建商店的订阅，并将更改持久保存到localStorage，还可以将localStorage中的潜在值用作默认值。

例

<script>
  import { writable } from "svelte/store";
  const store = writable(localStorage.getItem("store") || "");

  store.subscribe(val => localStorage.setItem("store", val));
</script>

<input bind:value={$store} />

Answer 4

找到了一个名为svelte-persisted-store 的库，它实现了此功能。为我工作。

安装：

npm install svelte-persisted-store

他们的自述文件中的示例：

// in store.ts or similar
import { persisted } from 'svelte-persisted-store'

// First param `preferences` is the local storage key.
// Second param is the initial value.
export const preferences = persisted('preferences', {
  theme: 'dark',
  pane: '50%',
  ...
})


// in views

import { get } from 'svelte/store'
import { preferences } from './stores'

preferences.subscribe(...) // subscribe to changes
preferences.update(...) // update value
preferences.set(...) // set value
get(preferences) // read value
$preferences // read value with automatic subscription