如何坚持苗条的商店

Question

是否有任何直接的选项来持久化 svelte store 数据，这样即使页面被刷新，数据也将可用。

我没有使用本地存储，因为我希望这些值具有反应性。

Answer 1

您可以手动创建对商店的订阅并将更改保存到 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 2

你可能还想看看这个https://github.com/andsala/svelte-persistent-store

另外，如果你使用 sapper 并且不想在服务器上运行某些东西，你可以使用 onMount 钩子

onMount(() => {
  console.log('I only run in the browser');
});

Answer 3

来自https://github.com/higsch/higsch.me/blob/master/content/post/2019-06-21-svelte-local-storage.md@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 函数以启用持久状态。

这在Routify 中非常适合我。对于Sapper，JHeth 建议“只需将count.useLocalStorage() 放在onMount 或if (process.browser) 中使用商店的组件中。”

Answer 4

如果有人需要使用 JavaScript 对象来实现这一点：

export const stored_object = writable(
    localStorage.stored_object? JSON.parse(localStorage.stored_object) : {});
stored_object.subscribe(val => localStorage.setItem("stored_object",JSON.stringify(val)));

好处是您可以使用 $ 简写访问可写对象，例如

<input type="text" bind:value={$stored_object.name}>
<input type="text" bind:value={$stored_object.price}>

Answer 5

TLDR：这是一个不仅负责设置和获取，还负责删除的函数。

function persistent(name) {
    const value = writable(localStorage.getItem(name));
    value.subscribe(val => [null, undefined].includes(val) ? localStorage.removeItem(name) : localStorage.setItem(name, val));
    return value;
}


export const my_token = persistent('token');

推理：与直觉相反，localStorage.setItem('someval', null) 不会为下一个localStorage.getItem('someval') 设置 return null 但"null" 这可能不是人们想要的。因此，这也会检查 undefined 和 null 并相应地删除该项目。

Answer 6

此函数将 svelte store 与 localStorage 同步。如果没有存储值，则改为使用 initValue 参数。

我还添加了 Typescript。

import { writable, Writable } from 'svelte/store';

const wStorage = <T>(key: string, initValue: T): Writable<T> => {
    const storedValueStr = localStorage.getItem(key);
    const storedValue: T = JSON.parse(storedValueStr);

    const store = writable(storedValueStr != null ? storedValue : initValue);
    store.subscribe((val) => {
        localStorage.setItem(key, JSON.stringify(val));
    })
    return store;
}

export default wStorage;

然后您可以在其他地方使用该功能，就像您习惯使用 writable 一样：

const count = wStorage<number>('count', 0);

编辑：如果您在应用中使用 SSR 并且不想使用 onMount 或检查 if (process.browser) 的每个可写方法。这是修改后的版本：

const wStorage = <T>(key: string, initValue: T): Writable<T> => {
    const store = writable(initValue);
    if (typeof Storage === 'undefined') return store;

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

    store.subscribe((val) => {
        localStorage.setItem(key, JSON.stringify(val));
    })
    return store;
}

Answer 7

使用 svelte 3.38 和 svelte-kit（Sapper 的继任者），我使用：

<script>
  import { onMount } from 'svelte';
  import { writable } from "svelte/store";

  let value;

  onMount(() => {
    value = writable(localStorage.getItem("storedValue") || "defaut value");
    value.subscribe(val => localStorage.setItem("storedValue", val));
  })
</script>

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

localStorage 在onMount() 之外不可用

Answer 8

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

作为奖励，如果localStorage 更改（例如在不同的选项卡中），此解决方案还会更新可写文件。所以这个解决方案可以跨标签工作。见Window: storage event

将其放入打字稿文件中，例如$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 9

适用于我的苗条版本3.44.1。

src/store.js 文件：

import { writable } from "svelte/store";
import { browser } from "$app/env"

export const fontSize = writable(browser && localStorage.getItem("fontSize") || "15");
fontSize.subscribe((value) => {
    if (browser) return localStorage.setItem("fontSize", value)
});